Mise à jour de la validité de la propriété FormArray après modification de validité

Question

J'utilise angular 4 pour créer un validateur personnalisé sous forme réactive sur un élément FormArray qui est un tableau. Cela fonctionne sur la charge initiale, cependant si j'ajoute un élément au tableau, puis supprime cet élément, la validation Validator.required n'est pas définie.

fromArray -> FormGroup

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

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

principale forme sur les principaux component.ts

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

je peux construire la forme et il fonctionne à 100%, j'ai un bouton d'envoi qui est désactivé Si le formulaire n'est pas valide et le chargement initial, le bouton reste désactivé jusqu'à ce que j'ajoute un élément à la propriété customItems. Une fois que je supprime l'élément ajouté, le bouton Soumettre est toujours activé même si maintenant il doit être désactivé car il est requis et n'a aucune valeur.

la méthode remove

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

Il supprime l'élément, mais la validité ne change pas sur le formulaire.

J'ai essayé avec le updateValueAndValidity() après le pullAt mais cela ne fonctionne pas semblent fonctionner.

Answer 1

Il s'avère que lorsque j'ai retiré l'élément de la matrice, il a juste laissé un [] vide parce que le pullAt vient d'être supprimé de l'index, qui a quitté la propriété avec une valeur de []. Donc j'ai dû assigner le tableau à null afin que la validation se déclenche.

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