Angular 模板驱动的表单验证：我应该 post 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

我建议你使用反应式。

不利的一面

template driven form

是无法对表单验证逻辑进行单元测试。测试此逻辑的唯一方法是运行使用浏览器进行端到端测试，例如使用像 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;
}

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

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

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

Angular template driven form validation : should I post ngModel or form.value?

angular

angular2-form-validation