Angular Material 7 – 输入

Angular Material 是一个 UI 组件库，它为我们提供了许多常用的 UI 组件，包括输入框、选择器、按钮等。本文将重点介绍如何使用 Angular Material 中的输入组件。

安装 Angular Material

在使用 Angular Material 之前，我们需要先安装它。可以通过 npm 来进行安装，具体命令如下：

npm install --save @angular/material @angular/cdk @angular/animations hammerjs

在安装完之后，需要引入 Angular Material 和它的样式。在 app.module.ts 文件中添加以下代码：

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [MatInputModule, MatFormFieldModule],
  exports: [MatInputModule, MatFormFieldModule]
})
export class MaterialModule {}

使用输入框

在 Angular Material 中，输入框的使用与普通的输入框大致相同。只需在 HTML 中添加 mat-form-field 和 mat- input 标签，并根据需要设置属性。示例如下：

<mat-form-field appearance="fill">
  <mat-label>Username</mat-label>
  <input matInput placeholder="Username">
</mat-form-field>

<mat-form-field appearance="outline">
  <mat-label>Password</mat-label>
  <input matInput placeholder="Password" type="password">
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Age</mat-label>
  <input matInput placeholder="Age" type="number">
</mat-form-field>

上述代码中，我们使用 mat-form-field 标签包裹输入框，并为输入框设置了一些属性（如外观、标签、类型等）。通过这些设置，我们可以实现各种样式的输入框。

颜色和主题

Angular Material 提供了多种颜色和主题，可以帮助我们创建出漂亮的 UI。我们可以通过在 app.component.scss 文件中添加以下代码来改变输入框的颜色：

@import '~@angular/material/theming'

 $my-custom-theme: ( primary: mat-palette($ mat-blue),
  accent: mat-palette( $mat-pink), warn: mat-palette($ mat-red)
);

@include mat-core();
@include angular-material-theme( $my-custom-theme); mat-form-field, mat-label, input { color: mat-color($ my-custom-theme, text, high-emphasis);
}

上述代码中，我们先定义了一个自定义主题 $my-custom-theme，并使用 angular-material-theme 来生成一个可用的主题。接着，通过修改 mat-form-field、mat-label 和 input 的颜色来实现颜色的变化。

表单验证

表单验证是每个 Web 应用程序必不可少的功能之一。Angular Material 为我们提供了内置的表单验证功能，可以帮助我们轻松地实现表单验证。

首先，需要在组件中定义一个 FormBuilder 变量：

constructor(private fb: FormBuilder) {}

然后，在 HTML 中添加一个 FormGroup，并在其中添加需要验证的字段：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <mat-form-field>
    <mat-label>Username</mat-label>
    <input matInput formControlName="username">
    <mat-error *ngIf="myForm.controls.username.invalid">{{getErrorMsg()}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Password</mat-label>
    <input matInput formControlName="password" type="password">
    <mat-hint align="end">{{myForm.controls.password.value?.length || 0}}/8</mat-hint>
    <mat-error *ngIf="myForm.controls.password.invalid">{{getErrorMsg()}}</mat-error>
  </mat-form-field>
  <button mat-button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

在组件中，需要先使用 FormBuilder 来创建一个 FormGroup，并定义需要验证的字段：

ngOnInit() {
  this.myForm = this.fb.group({
    username: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
    password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(30)]]
  });
}

最后，要在组件中添加一个方法来获取错误消息：

getErrorMsg() {
  if (this.myForm.controls.username.hasError('required')) {
    return 'You must enter a value';
  }

  if (this.myForm.controls.username.hasError('minlength')) {
    return 'Username must be at least 3 characters';
  }

  if (this.myForm.controls.username.hasError('maxlength')) {
    return 'Username must be at most 50 characters';
  }

  if (this.myForm.controls.password.hasError('required')) {
    return 'You must enter a value';
  }

  if (this.myForm.controls.password.hasError('minlength')) {
    return 'Password must be at least 8 characters';
  }

  if (this.myForm.controls.password.hasError('maxlength')) {
    return 'Password must be at most 30 characters';
  }
}

上述代码中，我们定义了一个 getErrorMsg 方法来获取错误消息。在此方法中，我们使用了表单控制器的 hasError 方法，并结合程序需要来返回错误消息。在 HTML 中，通过 *ngIf 来判断是否有错误，并显示相应的错误消息。