11.2.2 - 快速上手

引入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"
@NgModule({
    imports: [ReactiveFormsModule]
})
export class AppModule {}

在组件类中创建 FormGroup 表单控制对象

import { FormControl, FormGroup } from "@angular/forms"
export class AppComponent {
    contactForm: FormGroup = new FormGroup({
        name: new FormControl(),
        phone: new FormControl()
    })
}

关联组件模板中的表单

<form [formGroup]="contactForm" (submit)="onSubmit()">
    <input type="text" formControlName="name" />
    <input type="text" formControlName="phone" />
    <button>提交</button>
</form>

获取表单值

export class AppComponent {
    onSubmit() {
        console.log(this.contactForm.value)
    }
}

设置表单默认值

contactForm: FormGroup = new FormGroup({
    name: new FormControl("默认值"),
    phone: new FormControl(15888888888)
})

表单分组

contactForm: FormGroup = new FormGroup({
    fullName: new FormGroup({
        firstName: new FormControl(),
        lastName: new FormControl()
    }),
    phone: new FormControl()
})

<form [formGroup]="contactForm" (submit)="onSubmit()">
    <div formGroupName="fullName">
        <input type="text" formControlName="firstName" />
        <input type="text" formControlName="lastName" />
    </div>
    <input type="text" formControlName="phone" />
    <button>提交</button>
</form>

onSubmit() {
    console.log(this.contactForm.value.name.username)
    console.log(this.contactForm.get(["name", "username"])?.value)
}