11.1.2 - 快速上手

引入依赖模块 FormsModule

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

将 DOM 表单转换为 ngForm

<form #f="ngForm" (submit)="onSubmit(f)"></form>

声明表单字段为 ngModel

<form #f="ngForm" (submit)="onSubmit(f)">
    <input type="text" name="username" ngModel />
    <button>提交</button>
</form>

获取表单字段值

import { NgForm } from "@angular/forms"
export class AppComponent {
    onSubmit(form: NgForm) {
        console.log(form.value)
    }
}

表单分组

<form #f="ngForm" (submit)="onSubmit(f)">
    <div ngModelGroup="user">
        <input type="text" name="username" ngModel />
    </div>
    <div ngModelGroup="contact">
        <input type="text" name="phone" ngModel />
    </div>
    <button>提交</button>
</form>