响应式表单与级联表单详解(angular)-CSDN博客要使用响应式表单控件，就要从 @angular/forms 包中

响应式表单

导入依赖块

要使用响应式表单控件，就要从 @angular/forms 包中导入 ReactiveFormsModule，并把它添加到你的 NgModule 的 imports 数组中。

更新地址

src/app/app.module.ts

更新内容

引入类

import { ReactiveFormsModule } from '@angular/forms';

实例化

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})

创建表单实例

更新地址(ts)

src/app/app.component.ts

(任一组件内均可，现假设在根组件内)

引入类

import { FormControl,FormGroup } from '@angular/forms';

实例化

export class NameEditorComponent {
  profileForm = new FormGroup({
    name: new FormControl("")
  });
}

更新地址(html)

src/app/app.component.html

页面绘制

<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<label>
  Name1:
<input type="radio" value="0" (click)="update(0)" formControlName="name">
</label>
<label>
  Name2:
<input type="radio" value="1" (click)="update(1)" formControlName="name">
</label>
<button type="submit">Submit</button>
</form>

以上，绘制了一组控件，组中包含两个单选按钮，单选按钮与表单组变量name绑定，name的值可以在界面上使用

{{profileForm.value.name}}

也可以在ts中赋值和使用

console.warn(this.profileForm.value);
this.profileForm.setValue({ name: "1" });

如上，就完成了一个简单的表单组与表单变量的双向绑定。

创建级联表单

当表单的值与可监测的变量绑定后，创建级联表单变得简单了。

下面将实现一个简单的单选按钮与下拉框的绑定。

当然，换成其他任何两个表单元素都是相同的。

首先，创建下拉框。

创建下拉框实例

export class NameEditorComponent {
  profileForm2 = new FormGroup({
    down_val: new FormControl("")
  });
}

<form [formGroup]="profileForm2">
  <select formControlName="down_val">
    <option *ngFor="let val of downarr" [value]="val">{{val}}</option>
  </select>	
</form>

下拉框创建完毕，可以看到，下拉框的值与profileForm2绑定，下拉框的内容与数组downarr绑定，如此，可以通过改变profileForm2的值改变下拉框的选中项，通过改变数组downarr的值改变数组的内容。

profileForm2的读取和赋值

console.warn(this.profileForm.value);
this.profileForm2.setValue({ down_val : "1" });

创建联结

级联表单中，当单选按钮的值变化后，下拉框的值也跟着改变，事件一般由点击触发，因此可对单选按钮添加点击事件，在事件中对数组downarr进行重新赋值，从而改变下拉框内容。