Question

我有一个FormArray，其中包含多个FormGroup：

this.customFilterForm = this._formBuilder.group({
    filters: this._formBuilder.array([
        {
            key: ['', Validators.required],
            value: ['', Validators.required]
        },
        ... more
    ])
});

在模板中，我应用了＆＃39;键＆＃39; FormControl选择选项：

<form [formGroup]="customFilterForm" (ngSubmit)="onCustomFilterSubmit()">
        <ng-container formArrayName="filters">
            <div class="filter" *ngFor="let filter of filters.controls; let i=index" [formGroupName]="i">
                <select class="form-control select-content" formControlName="key" (change)="selectionChange($event.target.value, i)">
                    <option *ngFor="let option of customFilterOptions" value="{{option.key}}">{{option.name}}</option>
                </select>

                <!-- Text/Date input-->
                <input type="text" class="form-control" formControlName="value" *ngIf="!flagTextInput[i]">
                <div class="date-picker-custom" *ngIf="flagTextInput[i]">
                    <input class="form-control" style="float:none" placeholder="Select a date" ngx-mydatepicker name="value" formControlName="value"
                        [options]="dateOptions" #dp="ngx-mydatepicker" />
                    <button type="button" class="btn btn-default" (click)="dp.toggleCalendar()">
                        <i class="fa fa-calendar"></i>
                    </button>
                </div>
                <!-- End Text/Date input-->

                <button type="button" class="btn btn-custom btn-filter" title="Delete this filter" (click)="deleteCustomFilter(i)" *ngIf="i!=0">
                    <i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-custom btn-filter" title="Add one filter" (click)="addCustomFilter()" *ngIf="i==0" [disabled]="filters.controls.length === customFilterOptions.length">
                    <i class="fa fa-plus"></i>
                </button>
                <button type="submit" class="btn btn-custom btn-filter" title="Apply filter(s)" *ngIf="i==0" [disabled]="customFilterForm.pristine || customFilterForm.invalid">
                    <i class="fa fa-check"></i>
                </button>
            </div>
        </ng-container>
    </form>

是否可以验证用户是否选择了“键”键。哪个已在其他FormGroup中选择？

Answer 1

所以你必须创建一个自定义验证器。这样的事情。

import { FormControl } from '@angular/forms';

function validateKeyOtherGroup(key) {
  return (c: FormControl) => {
    const yourOtherFormKey = ... // The root of the key in the orher form
    return ( key === yourOtherFormKey ) ? {validateKey: {validation: false}}: null 
    };
  };
}

和

this.customFilterForm = this._formBuilder.group({
    filters: this._formBuilder.array([
        {
            key: ['', Validators.compose([validateKeyOtherGroup, Validators.required])],
            value: ['', Validators.required]
        },
        ... more
    ])
});

验证FormArray中select的重复值

1 个答案: