angular - 如何从Angular Form中的动态绑定（多次）元素中删除验证？

Question

我在按钮单击时添加了一个动态字段，并使用数组进行验证。我知道如何使用表单控件从 Angular 表单中删除验证。

但是在我在单击按钮上添加的动态元素中绑定验证后，就会出现问题。从下拉列表中选择任何值后，我无法从同一字段中删除验证。

我只想删除对下拉值更改/调用方法的验证 (change)="validRemove($event);"

.HTML 文件：

<div class="col-lg-12" formArrayName="itemRows">
    <label class="col-md-3 col-form-label">Location
    <span class="text-danger">*</span>
    </label>
    <div class="col-md-9">
        <select class="form-control" formControlName="location" (change)="validRemove($event);"     
        <option value="">Select</option>
        <option value="gurgaon">Gurgaon</option>
        <option value="delhi">Delhi</option>
        </select>   
    </div>
    <div class="row" *ngFor="let itemrow of requestCreateForm.controls.itemRows['controls']; let 
    i=index" [formGroupName]="i">
    <div class="col-lg-1">
        <label class="col-form-label">Currency Type <span
            class="text-danger">*</span></label>
    </div>
    <div class="col-md-2 pr-0 mb-3">
        <select class="form-control" formControlName="currencyType" [ngClass]="{ 'is-invalid': 
            submitted && itemrow.get('currencyType').errors}">
            <option value="">Select</option>
            <option value="Value1">Value1</option>
            <option value="Value2">Value2</option>
        </select>
        <div *ngIf="submitted && itemrow.get('currencyType').errors" class="invalid-feedback">
            <div *ngIf="submitted && itemrow.get('currencyType').errors.required">
                Type is required.
            </div>
        </div>
    </div>
    <div class="col-lg-2 text-right" *ngIf="customSwitch1.checked">
        <button type="button" (click)="addNewRow()" class="btn btn-primary"><i
            class="fa fa-plus-circle" aria-hidden="true"></i></button>
        <button type="button" (click)="deleteRow(i)" class="btn btn-outline-danger ml-2"><i
            class="fa fa-times" aria-hidden="true"></i></button>
    </div>
</div>
</div>

.TS 文件

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
import swal from "sweetalert2";
@Component({
    selector: 'app-form-request',
    templateUrl: './form-request.component.html',
    styleUrls: ['./form-request.component.scss']
})
export class FormRequestComponent implements OnInit {
    submitted = false;
    totalLength: any;
    myForm: FormGroup;
    TotalRow: number;
    constructor(private formBuilder: FormBuilder) { }
    get t() { return this.f.itemRows as FormArray; 
}
ngOnInit(): void {     
    this.myForm= this.formBuilder.group({
        itemRows: this.formBuilder.array([this.initItemRows()])     
    });

    initItemRows() {  
        return this.formBuilder.group({       
            currencyType: ['', 
            Validators.compose([Validators.required])],
        // I want to remove this validation on dropdown value change
        });
    }

    addNewRow() {
        const control = <FormArray>this.myForm.controls['itemRows'];
        if (control.length <= 4) {
            control.push(this.initItemRows());    
        }
        else {
            swal.fire({
                text: "Sorry !! You can add only 5 Rows",
                icon: "info",
                timer: 10000,
            });
        }
    }
    deleteRow(index: number) {
        const control = <FormArray>this.myForm.controls['itemRows'];
        if (control != null) {
            this.TotalRow = control.value.length;
        }
        if (this.TotalRow > 1) {
            control.removeAt(index);
        }
        // if(this.formArr.length != 1){
        //   this.formArr.removeAt(index);
        // }
        else {
            swal.fire({
                text: "This Row can not be deleted",
                icon: "info",
                timer: 10000,
            });
        }
    }
    validRemove(event){   
        this.myForm.controls['currencyType'].clearValidators(); 
        // This is not working
    
 this.myForm.controls['currencyType'].updateValueAndValidity();      
    }
}

标签： angularvalidationdropdownangular-reactive-forms