Wie wird eine Validierung der untergeordneten Komponente von der übergeordneten Komponente OnSubmit Angular 4 ausgelöst?

Question

Ich habe Formulare wie folgt, in Elternteil Ich schließe mehrere untergeordnete Komponenten ein, jede untergeordnete Komponente ist Formulargruppe. Jetzt muss ich alle diese untergeordneten Formularüberprüfungen auf übergeordnete Formular überprüfen, wenn Benutzer OnSubmit klicken.

Wie soll ich Kind Formular Validierungen von Eltern auf Senden auslösen. Ich habe FormBuilder in jeder Kindkomponente verwendet.

Ich kann Validierung durchführen, wenn Benutzer auf untergeordnete Felder klicken, aber wenn Benutzer nichts eingibt oder etwas berührt und versucht, Validierungen zu senden, die keine Fehler anzeigen.

parent.component.html

<form> 
    <child1></child1> 
    <child2></child2> 
    <child3></child4> 
    <child4></child4> 
'''' 
'''' 
'''' 
</form> 

child1.component.html

<div formgroup="child1group"> 
     <div formarray= "child1array"> 
     .... 
     ... 
     ... 
     </div> 
</div 

child2.component.html

<div formgroup="child2group"> 
     <div formarray= "child2array"> 
     .... 
     ... 
     ... 
     </div> 
</div 

bitte jemand sagen mir, wie diese Validierung auf eckigen 4 zu tun?

Answer 1

Übergeben Sie die Formcontrol Übergeordnetes als OUTPUT und dann Validierung tun, indem Funktion SaveConsole() aufrufen, in Taste

child1.component.ts klicken

@Output() public childControls = new EventEmitter(); 

public ngOnInit() { 
     this.childControls.emit(this.child1group); 
     this.child1group.valueChanges.subscribe(() => { 
      this.childControls.emit(this.child1group); 
     }); 
    } 

parent.component.html

<form> 
     <child1 (childControls)="child1Control = $event"></child1> 
     <button (Click)=SaveConsole()> Submit </butto> 
    </form> 

parent.ts

public child1Control: FormGroup; 
    public SaveConsole() { 
      if (this.child1Control.valid) { 
      // SAVE FORM 
      } else { 
      this.validateAllFormFields(this.child1Control); 
      } 
     } 
    public validateAllFormFields(formGroup: FormGroup) { 
     Object.keys(formGroup.controls).forEach(field => { 
     const control = formGroup.get(field); 
     if (control instanceof FormControl) { 
     control.markAsTouched({ onlySelf: true }); 
     } else if (control instanceof FormGroup) { 
     this.validateAllFormFields(control); 
     } 
    }); 
}