Aktualisierung der Gültigkeit der FormArray-Eigenschaft nach Änderung der Gültigkeit

Question

Ich benutze eckige 4, um einen benutzerdefinierten Validator in einer reaktiven Form auf einem FormArray Element zu erstellen, das ein Array ist. Es funktioniert beim ersten Laden. Wenn ich jedoch ein Element zum Array hinzufüge und dieses Objekt dann lösche, wird die Validator.required Validierung nicht gesetzt.

FromArray -> FormGroup

let customItemsValidator: Array<any> = item.selectType === 'custom' && item.required ? 
             [Validators.required] : []; 

return this.formBuilder.group({ 
    customItems: [[], customItemsValidator], 
}) 

Hauptformular auf der wichtigsten component.ts

this.appForm = this.formBuilder.group({ 
    option: this.formBuilder.array([]), 
    items: this.formBuilder.array([]) 
}); 

So kann ich die Form bauen und es funktioniert 100%, habe ich einen Absenden-Button, das deaktiviert wird Wenn das Formular nicht gültig ist und beim ersten Laden bleibt die Schaltfläche deaktiviert, bis ich ein Objekt zur customItems Eigenschaft hinzufüge. Sobald ich das hinzugefügte Element entferne, ist die Schaltfläche zum Senden weiterhin aktiviert, obwohl es jetzt deaktiviert werden sollte, da es erforderlich ist und keinen Wert hat.

die Methode remove

selectOptionsCustomRemove(customItem, customIdx: number, idx: number) { 
    pullAt(this.items.at(idx).get('customItems').value, customIdx); 
} 

So entfernt er das Element aber die Gültigkeit auf dem Formular nicht ändert.

Ich habe mit der updateValueAndValidity() nach der pullAt versucht, aber das funktioniert nicht scheinen zu funktionieren.

Answer 1

Stellt sich heraus, wenn ich das Element aus dem Array löschte es nur eine leere [], weil die pullAt nur aus dem Index entfernt, die die Eigenschaft mit einem Wert von [] verlassen. Also musste ich das Array null zuweisen, so dass die Validierung ausgelöst würde.

if (this.options.at(idx).get('customItems').value.length === 0) { 
     this.options.at(idx).patchValue({ customItems: null }) 
}