Eckige 2 Validierung zusammen mit der Kindkomponente

Question

Innerhalb der Elternkomponente habe ich eine Kindkomponente. Beide haben ihre Pflichtfelder. Am Ende muss ich die Schaltfläche zum Senden nur aktivieren, wenn beide Komponenten gültig sind (alle erforderlichen Felder sind in diesem Fall gefüllt).

Wie kann ich das erreichen, insbesondere bei der vorlagengesteuerten Validierung?

Seed Code

Stammkomponente

@Component({ 
    selector: 'parent-comp', 
    templateUrl: 'parent.html' 
}) 
export class Parent { 

} 

<input pInputText name="txt1" id="txt1" 
         required/> 

<child-comp></child-comp> 

<button pButton type="button" label="Submit" 
      [disabled]="IF ONE OF THE COMPS IS NOT VALID"></button> 

Kind Komponente

@Component({ 
    selector: 'child-comp', 
    templateUrl: 'child.html' 
}) 
export class Child { 

} 

<input pInputText name="txt2" id="txt2" 
         required/> 

Answer 1

Sie @Output Variable in Kind erstellen können, die form.valid Wert emittieren. Sie müssen FormBuilder und FormGroup verwenden (sehen Sie es hier nicht).

Jedes Mal, wenn Sie etwas im Formular ändern, müssen Sie eine Funktion aufrufen, die onchange ausgibt.

Beispiel für ein Kind:

@Output onchange: EventEmitter<Boolean> = new EventEmitter(false); 
formInChild: FormGroup; 

constructor(private fb: FormBuilder) { 
    this.formInChild = fb.group(...) 
    this.formInChild.valueChanges.subscribe(() => { 
    this.onchange.emit(this.form.valid); 
    } 
} 

Jetzt in parent:

(Ansicht)

<child-comp (onchange)="setButtonState($event)"></child-comp> 
<button pButton type="button" label="Submit" 
      [disabled]="!allvalid"></button> 

(Komponente)

formInParent: FormGroup; 
allvalid: boolean = false; 

constructor(private fb: FormBuilder) { 
    this.formInParent = fb.group(...); 
} 

setButtonState(formFromChildValid) { 
    this.allvalid = this.formInParent.valid && formFromChildValid; 
} 

In diesem Fall jedes Mal, wenn Sie ändern etwas im Kind für m, der gültige Zustand der Kindform wird zum Elternteil ausgesendet, der allvalid Variable aktualisiert, die durch Knopf gehört wird.