您如何验证基于 Angular2 中的另一个 FormBuilder 控件？

Question

我在 Angular2 中使用 FormBuilder，并创建了一个自定义验证器服务。

组件

this.exampleForm  = this.formBuilder.group({
    'FirstName': ['', Validators.required],
    'LastName': ['', [Validators.required]],
    'Description': [''],
    'Location': [''],
});

this.exampleForm .addControl("StartDate", this.formBuilder.group({
    'Month': [0, [Validators.required, ValidationService.monthValidator]],
    'Year': [0, [Validators.required, ValidationService.yearValidator]]
}));

this.exampleForm .addControl("EndDate", this.formBuilder.group({
    'Month': [0],
    'Year': [0]
}));

HTML 组件

<div formGroupName="StartDate">
    <select formControlName="Month">
        <option>...</option>
        </option>
    </select>
    <select formControlName="Year">
        <option>...</option>
    </select>
</div>

我不希望 EndDate 早于 StartDate

如何根据 StarDate 控件验证 EndDate 控件？

编辑

试过这样的：

this.exampleForm  = this.formBuilder.group({
        ...
    }, passwordMatchValidator);

function passwordMatchValidator(g: FormGroup) {
   return g.get('FirstName').value === g.get('LastName').value
      ? null : {'mismatch': true};
}

它没有任何作用

Answer 1

您应该将您的两个控件分组到一个 FormGroup 中并测试此 FormGroup 是否有效 https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html

编辑

默认情况下，如果每个 FormControl 都有效，则表单组是有效的。 您可以为 FormGroup 定义自定义验证器，就像为 FormControl 定义一样。 在此示例中，我向包含两个 FormControl 的 FormGroup 添加了一个验证器（passwordMatchValidator）。

stackoverflow-form.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';

@Component({
    selector: 'stackoverflow-form',
    templateUrl: 'stackoverflow-form.component.html',
    styleUrls: [
        'stackoverflow-form.component.css'
    ],
    providers: []
})
export class StackOverflowFormComponent implements OnInit {
    public myForm: FormGroup;
    public alphaCtrl: FormControl;
    public betaCtrl: FormControl;

    constructor(fb: FormBuilder) {
        this.alphaCtrl = fb.control('alphaValue', [StackOverflowFormComponent.myControlValidator]);
        this.betaCtrl = fb.control('betaValue', [StackOverflowFormComponent.myControlValidator]);
        this.myForm = new FormGroup({
            alpha: this.alphaCtrl,
            beta: this.betaCtrl,
        }, StackOverflowFormComponent.passwordMatchValidator);
    }

    // Custom FormControl Validator 
    static myControlValidator(control: FormControl) {
        return control.value.length > 1 ? null : { myInvalid: true};
    }

    // Custom FormGroup Validator 
    static passwordMatchValidator(g: FormGroup) {
        return g.get('alpha').value === g.get('beta').value
            ? null : {'mismatch': true};
    }

    ngOnInit() {}
}

stackoverflow-form.component.html

<form (ngSubmit)="onSubmit()" [formGroup]="myForm">
    <input formControlName="alpha" name="alpha"/>
    <input formControlName="beta" name="beta"/>
    <button type="submit" [disabled]="!myForm.valid">SEND</button>
</form>

stackoverflow-form.component.css

input.ng-invalid {
    background-color: red;
}

input.ng-valid {
    background-color: greenyellow;
}