angular2-forms - Angular 2中的模板驱动形式和 react 形式有什么区别

Question

在角度 2 中，模板驱动形式和 react 形式之间有什么区别。在哪些情况下我们需要使用模板驱动表单和响应式表单

Answer 1

简单来说我们可以说

react 形式 可用于以下情况

具有更多字段的复杂表单。

有多个复杂的验证。需要自定义验证

要求 JSON 结构与表单中的值一起发送。

我们可以通过使用“form.value”以结构化的方式获取整个表单

如果我们有 4 个字段，名字、姓氏、电子邮件、电话号码的 react 形式。

HTML 代码将是

<form [formGroup]="form">
    First Name <input formControlName="firstName">
    Last Name <input formControlName="lastName">
    Email <input formControlName="email">
    Phone Number <input formControlName="phoneNumber">
</form>

我们可以从下面的表格中获取值

{
"firstName": "FName",
"lastName": "LName",
"email": "test@123.com",
"phoneNumber": "123"
}

通过调用 form.value，其中 form 是我们创建的 FormGroup 变量。

模板驱动表单 :
它可以在使用简单表格时使用。喜欢登录页面。
具有两种方式的数据绑定(bind)。我们可以简单地从 ui 为变量赋值，反之亦然。

简单的例子是，如果我们为以下输入提供两种方式绑定(bind)。

<input [(ngModel)]="username">

我们可以简单地显示用户在 UI 中给出的值。

<p>Hello {{username}}!</p>