angular8表单校验

1.app.module.ts中注入：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [],
    imports: [
        FormsModule,
        ReactiveFormsModule
    ]
})

2.app.component.ts中注入：

import { FormGroup, FormControl, Validators } from '@angular/forms';

定义校验规则：

ngOnInit() {
    this.formData = new FormGroup({
      name: new FormControl(this.name, Validators.compose([
        Validators.required,
      ])),
      score: new FormControl(this.score, Validators.compose([
        Validators.required,
        this.scoreValueValidator
      ]))
    });
  }

  scoreValueValidator(control: FormControl): any {
    if (control.value < 0 || control.value > 100) {
      return { value: {info: '分数必须大于等于0，小于等于100'} };
    }
  }

3.app.component.html中使用：

    <form [formGroup]="formData" (ngSubmit) = "onsubmit(formData.value)">
        <div class="form-group">
            <label for="name">姓名</label>
            <em>*</em>
字符串
            <input type="text" class="form-control" [formControlName]="'name'" id="name">
            <div [hidden]="formData.get('name').valid || formData.get('name').untouched" class="small">
                <p [hidden]="!formData.hasError('required', 'threshold')">必填项</p>
            </div>
        </div>
        <div class="form-group">
            <label for="score">分数</label>
            <em>*</em>
            <input type="number" min="0" max="100" class="form-control" formControlName="score" id="score">变量
            <div [hidden]="formData.get('score').valid || formData.get('score').untouched" class="small">
                <p [hidden]="!formData.hasError('required', 'score')">必填项</p>
                <p [hidden]="!formData.hasError('value', 'score')">{{formData.getError('value', 'score')?.info}}</p>
            </div>
            <button type="submit" [disabled]="!formData.valid" class="btn btn-sm btn-primary">提交</button>
        </div>
    </form>