angular - Angular 模板驱动的表单验证：我应该发布 ngModel 还是 form.value？

Question

这是一个关于 Angular 2+ 模板驱动表单验证的良好实践的问题。

当我有

<form #form="ngForm">
    firstname : <input [(ngModel)]="user.firstname" name="firstname" />
    <button [disabled]="form.invalid" (click)="post()">Post</button>
</form>

我应该做

post() {
    this.userService.post(this.user);
}

或者

post() {
    this.userService.post(this.form.value);
}

?

Answer 1

我会建议你使用反应形式。

不利的一面

模板驱动表单

是表单验证逻辑不能进行单元测试。测试此逻辑的唯一方法是使用浏览器运行端到端测试，例如使用无头浏览器PhantomJs.

Answer 2

如果您的实体对象（您的示例中的用户）具有任何不包含在表单中的属性，例如 ID...

这段代码：

post() {
    this.userService.post(this.form.value);
}

不会包括他们。因此，它不会包括例如用户的 Id。

这段代码：

post() {
    this.userService.post(this.user);
}

将包括所有用户属性。

您可以通过像这样定义实体对象来看到这一点：

export interface IUser {
    id: number;
    firstname: string;
    lastname: string;
    isAdmin: boolean;
}

像上面一样将名字和姓氏添加到您的表单中，然后将以下内容添加到您的帖子中：

    console.log('form: ' + JSON.stringify(this.form.value));
    console.log('entity: ' + JSON.stringify(this.user));