如何使用 Angular Material 创建优秀的表单

Angular Material 是一款由 Angular 团队开发的 UI 组件库，其中包含了丰富的组件和样式，可以帮助开发者快速构建漂亮、易用、高效的 Web 应用程序。其中，表单是 Web 应用程序中不可或缺的组件之一，而 Angular Material 提供了丰富的表单控件和样式，可以帮助我们轻松创建优秀的表单。

本文将介绍如何使用 Angular Material 创建优秀的表单，包括表单控件的使用、表单验证和样式定制等方面。希望能够帮助开发者提高表单的质量和用户体验。

表单控件的使用

Angular Material 提供了丰富的表单控件，包括文本框、下拉框、单选框、复选框、日期选择器等。这些控件都是基于 Angular 的表单控件进行封装的，使用起来非常方便。下面以文本框和下拉框为例，介绍如何使用这些控件。

文本框

文本框是表单中最常用的控件之一，Angular Material 提供了两种不同的文本框控件：输入框和文本域。其中，输入框适用于单行文本输入，而文本域适用于多行文本输入。

<mat-form-field>
  <input matInput placeholder="姓名">
</mat-form-field>

<mat-form-field>
  <textarea matInput placeholder="个人简介"></textarea>
</mat-form-field>

上面的代码演示了如何使用 Angular Material 的输入框和文本域，其中 mat-form-field 是一个容器元素，用于包裹表单控件。matInput 是 Angular Material 提供的指令，用于将文本框控件转换为 Angular Material 风格的控件。

下拉框

下拉框也是表单中常用的控件之一，Angular Material 提供了 mat-select 指令用于创建下拉框控件。

<mat-form-field>
  <mat-select placeholder="性别">
    <mat-option value="male">男</mat-option>
    <mat-option value="female">女</mat-option>
  </mat-select>
</mat-form-field>

上面的代码演示了如何使用 Angular Material 的下拉框控件，其中 mat-select 是 Angular Material 提供的指令，用于创建下拉框控件。mat-option 是 Angular Material 提供的指令，用于创建下拉框中的选项。

表单验证

表单验证是保证表单数据有效性和完整性的重要手段，Angular Material 提供了丰富的表单验证功能，可以帮助我们轻松实现表单验证。

必填项验证

必填项验证是最基本的表单验证之一，Angular Material 提供了 required 属性用于实现必填项验证。

<mat-form-field>
  <input matInput placeholder="姓名" required>
</mat-form-field>

上面的代码演示了如何使用 required 属性实现必填项验证。当用户未填写姓名时，表单会提示用户该项为必填项。

数据格式验证

除了必填项验证，数据格式验证也是表单验证的重要部分之一。Angular Material 提供了 matInput 指令和 Validators 服务用于实现数据格式验证。

// www.javascriptcn.com code example
<mat-form-field>
  <input matInput placeholder="邮箱" [formControl]="emailFormControl">
  <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
    邮箱格式不正确
  </mat-error>
  <mat-error *ngIf="emailFormControl.hasError('required')">
    邮箱为必填项
  </mat-error>
</mat-form-field>

上面的代码演示了如何使用 Validators 服务实现邮箱格式验证。其中 emailFormControl 是一个表单控件对象，用于控制表单控件的状态和值。mat-error 是 Angular Material 提供的指令，用于显示表单验证错误信息。

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email
  ]);
}

上面的代码演示了如何创建一个表单控件对象，并使用 Validators 服务实现邮箱格式验证。其中 Validators.email 是 Angular 提供的邮箱格式验证器。

样式定制

除了表单控件和表单验证，样式定制也是表单开发中不可或缺的部分。Angular Material 提供了丰富的样式定制功能，可以帮助我们轻松实现样式定制。

主题颜色定制

主题颜色定制是 Angular Material 样式定制的重要部分之一，可以帮助我们定制应用程序的主题颜色。

// www.javascriptcn.com code example
@import '~@angular/material/theming';

$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  )
));

@include angular-material-theme($theme);

上面的代码演示了如何使用 Sass 变量定制 Angular Material 的主题颜色。其中 $primary、$accent 和 $warn 分别是主题颜色的定义，$theme 是主题对象，angular-material-theme 是 Angular Material 提供的样式指令，用于加载主题样式。

控件样式定制

控件样式定制是 Angular Material 样式定制的另一个重要部分，可以帮助我们定制表单控件的样式。

// www.javascriptcn.com code example
@import '~@angular/material/theming';

$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  )
));

@include angular-material-theme($theme);

.my-form-field {
  .mat-form-field-label {
    color: $warn-800;
  }

  .mat-form-field-underline {
    background-color: $accent-200;
  }

  .mat-form-field-ripple {
    background-color: $accent-100;
  }
}

上面的代码演示了如何使用 Sass 变量定制 Angular Material 的表单控件样式。其中 .my-form-field 是一个自定义的样式类，用于定制表单控件的样式。

示例代码

最后，本文提供了一个完整的示例代码，用于演示如何使用 Angular Material 创建优秀的表单。

// www.javascriptcn.com code example
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <mat-form-field class="my-form-field">
    <input matInput placeholder="姓名" formControlName="name" required>
    <mat-error *ngIf="nameFormControl.hasError('required')">
      姓名为必填项
    </mat-error>
  </mat-form-field>

  <mat-form-field class="my-form-field">
    <input matInput placeholder="邮箱" formControlName="email" [formControl]="emailFormControl">
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      邮箱格式不正确
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      邮箱为必填项
    </mat-error>
  </mat-form-field>

  <mat-form-field class="my-form-field">
    <mat-select placeholder="性别" formControlName="gender">
      <mat-option value="male">男</mat-option>
      <mat-option value="female">女</mat-option>
    </mat-select>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit">提交</button>
</form>

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  formGroup: FormGroup;

  nameFormControl = new FormControl('', [
    Validators.required
  ]);

  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email
  ]);

  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      name: this.nameFormControl,
      email: this.emailFormControl,
      gender: ''
    });
  }

  onSubmit() {
    console.log(this.formGroup.value);
  }
}

// www.javascriptcn.com code example
@import '~@angular/material/theming';

$primary: mat-palette($mat-blue);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn
  )
));

@include angular-material-theme($theme);

.my-form-field {
  .mat-form-field-label {
    color: $warn-800;
  }

  .mat-form-field-underline {
    background-color: $accent-200;
  }

  .mat-form-field-ripple {
    background-color: $accent-100;
  }
}

上面的代码演示了如何使用 Angular Material 创建优秀的表单，包括表单控件的使用、表单验证和样式定制等方面。希望能够帮助开发者提高表单的质量和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2c635a941bf713456a5ad