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中的条件验证

1 个答案: