Bedingte Formularvalidierungen für angulares reaktives Formular

Question

Ich versuche, bedingte Formularvalidierungen auf einem eckigen reaktiven Formular zu setzen, und brauche einige Hilfe.

Ich habe ein Formular Kontrolle, wo der Benutzer ihre Entitätstyp entweder Einzel- oder Geschäfts setzt

<select formControlName="entity"> 
    <option [value]="individual">Individual</option> 
    <option [value]="business">Business</option> 
</select> 

ich dann Formulareingaben, die ein- oder ausblenden, basierend auf welcher Einheit ausgewählt wird:

<div *ngIf="myForm.controls.entity.value == individual> 
    <input formControlName="fullName" /> 
</div> 

<div *ngIf="myForm.controls.entity.value == business> 
    <input formControlName="businessName" /> 
</div> 

Wie kann ich beide Eingaben nur dann vornehmen, wenn die entsprechende Entität ausgewählt ist?

Answer 1

können Sie das Attribut [Formcontrol] = "name_of_your_input_control" diesen HTML Annahme, daß innerhalb eines formGroup Element

<div [hidden]="isBusiness"> 
    <input [formControl]="fullName" /> 
</div> 

<div [hidden]="!isBusiness"> 
    <input [formControl]="businessName" /> 
</div> 

in Ihrer ts Klasse:

Nachdem Sie Ihre Form diese erstellen hinzu:

isBusiness:boolean = false; 
//... 
this.nameOfYourForm.valueChanges.subscribe((newForm) => { 
    this.isBusiness = (newForm.controls.entity.value == 'business'); 
    if(this.isbusiness){ 
     this.nameOfYourForm.controls.fullName.setValidators(/*your new validation here*/); 
      //set the validations to null for the other input 
    }else{  
      this.nameOfYourForm.controls.businessName.setValidators(/*your new validation here*/); 
      //set the validations to null for the other input 
    } 
}); 

Beachten Sie, dass ich Ihre * ngIf zu [versteckt] geändert als * ngIf wird komplett entfernen Sie die controle aus Ihrer Vorlage, wo [versteckt] nur eine Anzeige anwenden wird keiner.

Sie können auch einen Änderungslistener für ein bestimmtes Steuerelement anstelle des gesamten Formulars hinzufügen, aber die Idee ist dieselbe.

Answer 2

Ich habe eine andere Version:

HTML

<select #select formControlName="entity"> 
    <option [ngValue]="Individual">Individual</option> 
    <option [ngValue]="Business">Business</option> 
</select> 
<br> 
<div *ngIf="select.value[0] === '0'"> 
    <input #input [required]="select.value[0] === '0'" formControlName="fullName" /> 
    <span *ngIf="!myForm.get('fullName').valid">Invalid</span> 
</div> 

DEMO