Formatting ng-init text inside input tag - AngularJS

Question

I am having ng-init defined in my input tag. I would like to have this input in the specified format with line breaks.

I tried using <pre> tags and white-space:pre-line property too. But this seems not to get sorted.

<div style="font-family: Poppins !important;-webkit-font-smoothing: antialiased;top:35%; position:absolute; width: 100%; background:transparent !important; margin-bottom:0rem !important">
   <input class="form-control"
      id="volunteerCallTextId" type="text" placeholder="Volunteer Call Text"
      ng-model="volunteerCallText"
      ng-init="volunteerCallText ='Hello, may I speak to (Insured).  Hi (Mr., Mrs. Etc), my name is _________.  
      I am with xxx Insurance and am calling you about the recent fire/flood/weather event in_____.  
      We are calling to check and see if your family is safe and let you know that xxx is here for you.   
      I want to let you know that we have emergency claims locations set up at: (use locations below).  
      Or you can call our Claims center at 888....Please be aware that.....'" 
      style="width: 75em; height:25em; white-space:pre-line" />
</div>

Format expected:

Hello, may I speak to (Insured). Hi (Mr., Mrs. Etc), my name is _________.
I am with xxx Insurance and am calling you about the recent fire/flood/weather event in_____. We are calling to check and see if your family is safe and let you know that xxx is here for you.
I want to let you know that we have emergency claims locations set up at: (use locations below). Or you can call our Claims center at 888....Please be aware that.....

Can someone suggest what could be done?

are you trying to display the text or set the value of input ? — msd117
– msd117, Commented Dec 6, 2018 at 11:17
so ng init is not necessary right? and why display the text in an input filed? — msd117
– msd117, Commented Dec 6, 2018 at 12:51

msd117 · Accepted Answer · 2018-12-06 13:31:35Z

I am not sure it can be done in input box or not but it works like this in textarea please try and let me know if t helps you

<!DOCTYPE html>
    
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>
    
    <div ng-app="" >
    
    <div style="font-family: Poppins !important;-webkit-font-smoothing: antialiased;top:35%; position:absolute; width: 100%; background:transparent !important; margin-bottom:0rem !important">
       <textarea class="form-control"
          id="volunteerCallTextId" style="width:75em; height:25em; white-space: pre-wrap;" type="text" placeholder="Volunteer Call Text"
          ng-model="volunteerCallText"
          ng-init="volunteerCallText ='Hello, may I speak to (Insured).  Hi (Mr., Mrs. Etc), my name is _________ \n\
I am with xxx Insurance and am calling you about the recent fire/flood/weather event in_____.\n\
We are calling to check and see if your family is safe and let you know that xxx is here for you.I want to let you know that we have emergency claims locations set up at: (use locations below).Or you can call our Claims center at 888....Please be aware that.....'"
           ></textarea>
    </div>
    </div>
    </body>
    </html>

Woule be helpful if your clarify this other doubt. With this ng-init, can I include any dynamic object in the __________ area? i.e, the values which I get from scope variable in controller?
Yes ... just use the volunteerCallText to assiign new values
i would sugggest you show the static text in <h1> or <p> tag and only use input box for values whch you need dynamically

Collectives™ on Stack Overflow

Formatting ng-init text inside input tag - AngularJS

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related