angular form 示例
时间: 2023-10-08 13:13:42 浏览: 66
以下是一个简单的 Angular 表单示例:
1. 在组件模板中添加表单元素:
```html
<form (ngSubmit)="onSubmit()">
<label>
Name:
<input type="text" name="name" [(ngModel)]="name" required>
</label>
<label>
Email:
<input type="email" name="email" [(ngModel)]="email" required>
</label>
<button type="submit">Submit</button>
</form>
```
2. 在组件类中定义表单数据模型和提交事件处理函数:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.css']
})
export class FormComponent {
name: string;
email: string;
onSubmit() {
console.log(`Name: ${this.name}, Email: ${this.email}`);
}
}
```
在这个示例中,我们使用了 Angular 的双向数据绑定 `[(ngModel)]` 来收集表单数据,并在用户点击提交按钮时触发 `onSubmit()` 函数来处理表单数据。需要注意的是,我们还使用了 `required` 属性来标记必填字段,并在表单元素中添加了 `name` 属性来给表单元素命名。