反应式或模板形式？

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 应该是 Clause 对象的。 例如：

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

回车后

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

谁能帮我解决这个问题？ 为了更好的参考，我将发布另一个使用相同格式的问题，它可能会帮助您更好地解决这个问题TypeScript for loop in a nested Array?

我的隐形眼镜干了，我盯着屏幕太久了。请向我询问更多说明。愿原力与你同在。

Answer 1

使用响应式表单

原因：- 轻松创建动态表单组 dynamic form

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

Answer 2

使用模板表单

更容易学习和维护。

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

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

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

Answer 3

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

在每个键上保存值 Enter：

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 }]; // This is a simplified model for mod, but demonstrates the principal.

在模板中

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

遍历 mods 数组并将每个 mod 绑定到您的表单，使用 id 为每个表单字段创建唯一名称。

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

在文本字段中，我有一个 keydown 检查以查看是否已按下 enter。如果它已经向数组添加了另一个具有递增 id 的 mod 并阻止默认停止将新行添加到文本框。

名称上还有一个名为 autoFocus 的指令，因此当它首次出现时，焦点会从文本中获取并放在新创建的 mod 的名称上。

@Directive({
    selector: '[autoFocus]'
})
export class AutofocusDirective {
  public constructor(private el: ElementRef) {
    setTimeout(() => { el.nativeElement.focus(); });
  }
}