反应式还是模板形式？

Question

这更多是基于方法的问题，而不是编码问题。我必须创建一个包含3个字段的表单，即名称，说明和文本

这是我的mod.ts的样子。

mod.ts

export interface Mod {
  id: number,
    name ? : string,
    clauseList: Clause
}

export interface Clause {
  cName ? : string,
    cid ? : number,
    description: string,
    id ? : number,
    text ? : Text
}


export interface Text {
  cid: number
  txt ? : string,
    tid ? : number

}

我的第一个问题是我应该为该项目选择模板驱动的表单还是被动式表单？

第三个字段的要求之一是，每当用户点击输入时，tid应该增加1，并且将用户输入的内容保存为不同的表单组。 cid应该是子句对象的。例如：

txt = "hi",
tid =1,
cid = 1 

[按回车后

txt = "welcome to our shop",
tid = 2,
cid = same as above

有人可以帮我吗？为了更好地参考，我将发布另一个使用相同格式的问题，它可以帮助您更好地解决此问题TypeScript for loop in a nested Array？

我的隐形眼镜干dried了，我盯着屏幕看了太久了。请让我进一步澄清。愿力量与你同在。

Answer 1

使用反应形式

原因：-易于创建动态formGroupdynamic form

• 表格的全部控制权在您手中。
• 高度可测试的单元

Answer 2

使用模板表格

更容易学习和维护。

无需重复处理数据，只需将模型绑定到模板，而不必创建表单对象并将其绑定到模板。

易于创建可重用的验证属性，比起反应性验证器但功能相同的样板要多。

高度可单元测试，您正在测试实际的模板绑定，而不仅仅是在模板中可能未正确绑定的对象。您只需要等待组件更新即可轻松地抽象为帮助函数。

Answer 3

取决于您的要求。可以说，如果您必须创建一些“登录/注册”表单，则会显示验证，并显示被认为是良好的用户体验的内联验证错误消息，而不是某些Toastr。在这种情况下，使用“反应形式”。对于简单表单或仅用于收集某种数据，可以使用“模板驱动”表单。

要保留每个键的值，请输入：

HTML：

TS：

public formVal = [];
txt = '';
name = '';
desc = '';

onEnter(event) {
    if (event && event.keyCode === 13) {
        const obj = {
            name: this.name,
            desc: this.desc,
            txt: this.txt
        };
        formVal.push(obj);
    }
}

Answer 4

Reactive Forms提供了丰富的API，可以管理任何复杂的表单，它具有很高的可测试性和可维护性，它使您可以轻松创建动态表单并应用复杂的验证，因此几乎适用于所有表单。当您只需要绑定某些输入而不进行任何验证（例如搜索字段）时，模板表单仅适用于一些简单的事情。

Answer 5

这里是问题的实际答案，而不仅仅是模板形式与反应形式。我在此答案中使用模板形式。

https://stackblitz.com/edit/angular-bmcapk

拥有您的模组数组

mods = [{ id: 0 }];

和模板中

<ng-container *ngFor="let mod of mods; index as i;">
  <label>
    Name<input [name]="'name_' + i" [(ngModel)]="mod.name" autoFocus>
  </label><br>
  <label>
    Desc
    <input [name]="'description_' + i" [(ngModel)]="mod.description">
  </label><br>
  <textarea [name]="'text_' + i" [(ngModel)]="mod.text" (keydown)="checkKey($event)"></textarea><br>
</ng-container>

迭代mod数组并将每个mod绑定到您的表单，使用索引为每个form字段创建一个唯一的名称。

checkKey(e) {
  if (e.keyCode === 13) {
    this.mods.push({ id: this.mods[this.mods.length - 1].id + 1 });
    e.preventDefault();
  }
}

在文本字段中，我进行了按键检查，以查看是否已按下Enter键。如果已将另一个Mod添加到具有递增ID的数组，并防止默认情况下停止将新行添加到文本框。名称上还有一个名为autoFocus的指令，因此当它第一次出现时，焦点将从文本中移出并放在新创建的mod的名称上。