1. 导入 FormsModule：
在你的模块中（通常是 app.module.ts）导入 FormsModule，以便使用模板驱动表单。
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // Import FormsModule
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule], // Add FormsModule to imports
bootstrap: [AppComponent],
})
export class AppModule {}
2. 在模板中创建表单：
在你的组件模板中创建表单。使用 ngForm 指令创建一个表单，并使用 ngModel 指令为表单元素绑定数据。
<!-- src/app/app.component.html -->
<h1>Template-Driven Form</h1>
<form #heroForm="ngForm" (ngSubmit)="onSubmit()">
<label for="heroName">Hero Name:</label>
<input id="heroName" name="heroName" ngModel required>
<button type="submit">Submit</button>
</form>
这里，ngForm 指令表示整个表单，ngModel 指令用于绑定表单元素（这里是输入框）的值。required 属性表示这个字段是必填的。
3. 在组件中处理表单提交：
在你的组件类中，处理表单的提交事件。你可以在 ngSubmit 事件中调用一个方法。
// src/app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `...`, // Your template
styles: [],
})
export class AppComponent {
onSubmit() {
// Handle form submission logic here
console.log('Form submitted!');
}
}
在实际应用中，你可能会将表单数据传递给服务或执行其他逻辑。
4. 显示表单验证错误：
如果你的表单元素设置了 required 属性，你可以通过 ngModel 的 #heroName="ngModel" 语法来获取验证状态。
<!-- src/app/app.component.html -->
<form #heroForm="ngForm" (ngSubmit)="onSubmit()">
<label for="heroName">Hero Name:</label>
<input id="heroName" name="heroName" ngModel required #heroName="ngModel">
<div *ngIf="heroName.invalid && (heroName.dirty || heroName.touched)">
<div *ngIf="heroName.errors.required">Hero Name is required</div>
</div>
<button type="submit">Submit</button>
</form>
在这里，heroName.invalid 表示输入框的验证状态，heroName.errors.required 表示输入框的必填验证错误。
5. 运行应用：
在命令行中运行 ng serve，然后在浏览器中打开 http://localhost:4200/，你应该能够看到你创建的模板驱动表单。
这就是在 Angular 项目中构建模板驱动表单的基本步骤。
转载请注明出处：http://www.zyzy.cn/article/detail/5027/Angular