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));

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

2 个答案: