Angular Material - 具有错误状态的自定义反应形式控制

# Angular Material 中的自定义响应式表单控制与错误状态

typescript
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html',
  styleUrls: ['./custom-form.component.css']
})
export class CustomFormComponent implements OnInit {
  ageForm: FormGroup;
  ngOnInit() {
    this.ageForm = new FormGroup({
      age: new FormControl('', [Validators.required, this.ageRangeValidator])
    });
  }
  ageRangeValidator(control: FormControl) {
    const age = control.value;
    if (age !== null && (isNaN(age) || age < 18 || age > 99)) {
      return { 'ageRange': true };
    }
    return null;
  }
}

html
  
    
    
      Age is required
    
    
      Age must be between 18 and 99