угловая привязка с пустыми или пустыми полями вопрос - PullRequest
Новая
       22

угловая привязка с пустыми или пустыми полями вопрос

0 голосов
/ 12 января 2019

используя angular7

У меня есть простой адресный объект 

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

и я хочу сделать простую смену адреса, поэтому у меня есть код, который отображает адрес с небольшим значком обновления, как только вы нажимаете, мы переходим в режим ввода

это, кажется, прекрасно работает, пока все данные заполнены, если значение равно нулю или скажем user.addressLine2 = '', я получаю

Если в теге формы используется ngModel, либо должен быть задан атрибут name, либо элемент управления формы должен быть определен как «автономный» в ngModelOptions.

любые идеи о том, что мне нужно сделать с моим 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>

Ответы [ 2 ]

0 голосов
/ 13 января 2019

нашел простое решение в Reddit / R / Angular и просто хотел опубликовать, если для будущих ссылок

решением было изменить атрибуты имени с 

name="{{ user.zipcode }}"  to name="{{ zipcode }}
0 голосов
/ 13 января 2019

Есть ли особая причина для привязки динамических данных к атрибутам имени? Если нет, не используйте динамические данные для атрибутов имени, просто назовите их статически, все равно будет работать. 

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