angular binding with null or empty fields question

Question

using angular7

I have a simple address object

user.addressLine1: '100 King Street',
user.addressLine2: 'Apt b',
user.city: 'New York',
user.state: 'NY',
user.zipcode: '10012'

and I want to do a simple address change, so I have code that displays the address with a little update icon, once you click that we go into input mode

this seems to work great as long as all the data is populated, once a value is null or say user.addressLine2 = '', I get the

If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

any ideas what I need to do to my html or ts file, I would most certainly be appreciated - below is my a bit of my html and all inputs have the name attribute

   <h2>Address</h2>
   <h3>Primary Address<i class="icon-edit" (click)="editAddress()"></i></h3>
   <div *ngIf="isReadOnly">
     <div class="name">
       <span>{{ user.addressLine1 }}</span>
     </div>
     <div class="name">
       <span>{{ user.addressLine2 }}</span>
     </div>
     <div class="name">
      <span>{{ user.city }} {{ user.state }} {{ user.zipcode }}</span>
     </div>
    </div>

    <div *ngIf="!isReadOnly">
      <div class="name">
        <input name="{{ user.addressLine1 }}" [(ngModel)]="user.addressLine1"/>
      </div>
      <div class="name">
        <input name="{{ user.addressLine2 }}" [(ngModel)]="user.addressLine2"/>
       </div>
       <div class="name">
         <input name="{{ user.city }}" [(ngModel)]="user.city"/>
         <select name="{{ user.state }}" [(ngModel)]="user.state">
           <option>{{ user.state }}</option>
           <option *ngFor="let state of states" [value]="state.state">
               {{ state.name }}
           </option>
         </select>
         <input name="{{ user.zipcode }}" [(ngModel)]="user.zipcode"/>
        </div>
        <div class="name">
         <button type="button" name="submit" (click)="clickSubmit(user)">Submit</button>
        </div>
      </div>

avatsaev · Accepted Answer · 2019-01-12 23:37:06Z

1

Is there a particular reason to bind dynamic data to name attributes? If not, don't use dynamic data on name attributes, just name them statically, it'll still work.

 <input name="userAddressLine2" [(ngModel)]="user.addressLine2"/>

answered Jan 12, 2019 at 23:37

avatsaev

931 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

saucerman · Accepted Answer · 2019-01-12 23:38:13Z

0

found the simple solution over at reddit/r/angular and just wanted to post if for future references

the solution was to change name attributes from

name="{{ user.zipcode }}"  to name="{{ zipcode }}

answered Jan 12, 2019 at 23:38

saucerman

738 bronze badges

Collectives™ on Stack Overflow

angular binding with null or empty fields question

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related