angular_form_examples

Angular 表单示例

Angular 提供了强大的表单处理功能，以下是一些常见的 Angular 表单示例。

1. 简单表单

一个简单的表单，包含一个输入框和一个提交按钮。

<form>
  <input type="text" placeholder="请输入内容">
  <button type="submit">提交</button>
</form>

2. 动态表单

根据用户输入动态添加表单项。

<form>
  <input type="text" placeholder="请输入内容">
  <button type="button" (click)="addField()">添加</button>
  <div *ngFor="let field of fields; let i = index">
    <input type="text" [value]="field">
    <button type="button" (click)="removeField(i)">移除</button>
  </div>
</form>

3. 表单验证

使用 Angular 的表单验证功能，确保用户输入的数据符合要求。

<form [formGroup]="myForm">
  <input type="text" formControlName="username">
  <div *ngIf="myForm.get('username').hasError('required')">
    用户名不能为空
  </div>
</form>

更多关于 Angular 表单的内容，请访问本站Angular 表单教程。

Angular Logo