Question

使用angular7

我有一个简单的地址对象

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

我想做一个简单的地址更改，所以我有一段代码，在您单击该按钮后，我们便进入了输入模式，并显示了一个带有少许更新图标的地址

只要填充了所有数据，这似乎就很好用，一旦值为空或说到user.addressLine2 =''，我就得到

如果在表单标签中使用ngModel，则必须在ngModelOptions中设置name属性或将表单控件定义为“独立”。

我对html或ts文件需要做什么的任何想法，我将不胜感激-以下是我的html内容，所有输入内容都具有name属性

   <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>

Answer 1

是否存在将动态数据绑定到名称属性的特定原因？如果不是这样，请不要在名称属性上使用动态数据，只需静态命名它们，它就仍然可以使用。

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

Answer 2

在reddit / r / angular找到了简单的解决方案，只想发布以供将来参考

解决方案是从更改名称属性

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

具有空字段或空字段的角度绑定问题

2 个答案: