Question

角度6：

显示列表

<ng-container *ngFor="let list of lists">
    <div class=card>
      <h2>{{list.name}}</h2>
      <ul>
        <li *ngFor="let item of list.items">{{item}}</li>
      </ul>
      ///.... add an item to list (code below see all options)....
    </div>

将项目添加到列表：选项1

<input type="text" #addItemTitle>
<button [disabled]="!( addItemTitle.value.length > 4)" 
(click)="addItem( addItemTitle.value )">Add Item</button>

详细信息（选项1）：在过去3个月内执行此操作，效果很好。现在我想添加验证。仅当在输入框外单击时，才进行值更新。

将项目添加到列表：选项2

<input type="text" [(ngModel)]="addItemTitle">
<button [disabled]="!(addItemTitle?.length > 4)" 
(click)="addItem( addItemTitle )">Add Item</button>

详细信息（选项2）：这里的问题是所有ngModel的行为都一样，因此更新会更新所有其他模型（bcz。ngModel相同），对于FormControlDirective也是一样

将项目添加到列表：选项3（当前使用）

<input type="text" [(ngModel)]="addItems[i]">
<button [disabled]="!((addItems[i])?.length > 4)" 
(click)="addItem( addItems[i] )">Add Item</button>

详细信息（选项3）：这是我当前正在使用的，我在component.ts中声明了addItems = []，它可以正常工作。

我的担忧：

稳定性：选项3很好。其他建议。
可扩展：我还必须编辑/删除项目，因此将ngfor嵌套在ngfor中，因此addItems = []将不起作用，我可能必须声明addItems = [[]]，addItems [i] [j]
因此，我的主要目的是验证。 FormControlDirective提供了很好的验证控件，但是addItems = [a，b，c]，其中a，b，c是新的FormControl，但是我不知道这个数字...

编辑：

我找到了一个更好的解决方案：使用组件，创建一个名为InputHandlerCmp的额外组件，使用@Input和changes将数据传递给它。这条路分隔每个ngModel或FormControlDirective（更好的验证）

在NgFor（Angular6）中使用FormControl或ngModel

0 个答案: