Угловая форма с двумя шаблонами с входами 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?

Ответы

Ответ 1

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

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

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

Ответ 2

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

Угловой 4 - "Нельзя привязываться к" ngModel ", так как это не известное свойство ошибки" input "

Ответ 3

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

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

// 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 и получить доступ к его данным.