Angular 中的条件验证

Question

我想在这里验证开始年龄和结束年龄的值。

规则：

年龄从应该小于年龄到。年龄 To 必须大于年龄

Angular 6.0.7版本

这是定义的表单组，还有其他表单值，这里跳过不相关的条目。

 myForm = new FormGroup({     
          'ageFrom': new FormControl( ),
          'ageTo': new FormControl(),

        });

这是 html 搜索按钮应该被禁用如果验证失败并且应该显示错误消息

 <input type="number"  class="form-control" formControlName="ageFrom" >        
  <input type="number"  class="form-control"  formControlName="ageTo" >
 <button type="submit" class="btn btn-primary ripple" click)="search()">Search</button>

已尝试自定义验证器，但未显示消息，让我知道此用例是否需要自定义验证器？

尝试过 Angular 6, 以下选项可用

<input min="0" max="5">，但同样他们可以输入任何数字。

Answer 1

模板

<p style="color: red" *ngIf="myform.invalid">{{myform.errors | json}}</p>
<form [formGroup]="myform">
    <label>
        from:
        <input type="number" formControlName="from">
    </label>
    <label>
        to:
        <input type="number" formControlName="to">
    </label>
    <button type="submit" [disabled]="myform.invalid">go</button>
</form>

控制器

import { Component } from '@angular/core';
import { FormBuilder, AbstractControl, ValidationErrors } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    myform = this.builder.group({
        from: '',
        to: ''
    }, {
        validator: this.isValid
    });

    constructor(private builder: FormBuilder) {
    }

    isValid(c: AbstractControl): ValidationErrors {
        let diff = c.value.to - c.value.from;

        return (diff < 18)
            ? { 'young': 'must be 18 years or older' }
            : null;
    }
}

Angular 中的条件验证

Conditional validation in Angular

typescript

angular-validation

angular5

angular6