it-swarm.com.ru

Angular 2 управляемая шаблоном форма с входами ngFor

Можно ли создать поля ввода с помощью ngFor в форме, управляемой шаблоном, и использовать что-то вроде # name = "ngModel", чтобы можно было использовать name.valid в другом теге?

Прямо сейчас у нас есть динамический список товаров с полем количества и кнопкой "Добавить в корзину" в таблице. Я хочу сделать все это формой с кнопкой "Добавить все" в конце:

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               #????="ngModel"
               validateQuantity>
        <button (click)="addItemToCart(item)"
                [disabled]="!????.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

Но как я могу сгенерировать новое имя переменной в строке для ngModel?

14
Jeppz

В этом нет необходимости, просто сделайте это так:

<form #form="ngForm">
    <div *ngFor="item in items">
        <input name="product-{{item.id}}"
               [(ngModel)]="item.qty"
               validateQuantity
               #qtyInput>
        <button (click)="addItemToCart(item)"
                [disabled]="!qtyInput.valid">Add to cart</button>
    </div>
    <button (click)="addAll()"
            [disabled]="!form.valid">Add all</button>
</form>

Его угловая часть здесь. :)

22
mxii

Ответ mxii работает, как и ожидалось, для элементов формы, динамически создаваемых ngFor, но если вы не собираетесь использовать ngForm, и вы перебираете список элементов, которые имеют независимую сущность (например, список комментариев) и пользователь должен иметь возможность отвечать на каждый комментарий) вы можете использовать ссылочные переменные шаблона , которые дают вам возможность легко получать и работать с элементом Input.

Вот как вы можете это сделать:

// Your template
<div *ngFor="item in items">
  <!-- Your input -->
  <input #itemInput type="number">

  <button (click)="addItemToCart(itemInput.value)"
          [disabled]="!itemInput.value">Add to cart</button>
</div>

Он дает ссылку на переменную, назначенную для поля ввода, и здесь в приведенном выше примере мы передали itemInput.value, который будет значением поля ввода; Могут быть случаи, когда вам нужна ссылка на поле ввода (скажем, вы собираетесь удалить его значение, когда получите данные), вы можете просто передать itemInput и тип HTMLInputElement и получить доступ к его данным.

0
M98

вам нужно добавить FormModule в ваш app.module.ts, чтобы заставить работать двухстороннее связывание, по крайней мере, в более новых версиях angular 

Angular 4 - «Невозможно связать с« ngModel », так как это не известное свойство« input »»

0
gischy