typescript - Kontrollera om ett formulär är giltigt från en föräldrakomponent med Angular 4

Jag försöker kontrollera giltigheten av ett formulär som finns på en barnkomponent från en föräldrakomponent. Det bästa scenariot skulle vara att inaktivera en knapp på föräldrakomponenten om formuläret är ogiltigt eller i värsta fall att utlösa en varning från föräldraknappen om formuläret är ogiltigt.

Jag kunde lyckas kolla om formuläret har klassen 'ng-invalid' från föräldern genom att använda en @ViewChild-dekoratör för att kalla en funktion på barnkomponenten som följer:

Föräldrakomponent:

export class CandidateVerificationComponent implements OnChanges, OnInit {

@ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent;

saveAndFinish() {

    if (this.rightPanelPointer.checkFormValidity())
    {
        alert('No Valid');
        return;
    }

    this.rightPanelPointer.onSubmit();

  }    
}

Barnkomponent:

export class RightPanelComponent implements OnChanges , OnInit{

@ViewChild("candiateForm", { read: ElementRef }) tref: ElementRef;

   checkFormValidity():boolean {        
    return (this.tref.nativeElement.className.indexOf('ng-invalid') !== -1);
   }  
}

Det fungerar för det värsta scenariot, men jag gillar inte idén att koppla komponenten till DOM:en, jag skulle föredra en smartare idé.

Jag skulle vilja använda en mallreferensvariabel (#candiateForm), till exempel den som tillåter att kontrollera giltighet på submit-knappen (se nedan) från formuläret (barn) för att kontrollera giltighet från föräldern. Är det möjligt att få tillgång till den mallvariabeln från föräldern?

 <form (ngSubmit)="onSubmit()" #candiateForm="ngForm" name="candiateForm" (change)="formChanged()">
    <div class="form-group">
      <label class="control-label" for="firstName">First name:</label>                           
      <input type="text" class="form-control" id="firstName" pattern="^[^0-9]+$" required [(ngModel)]='candidate.firstName' name="firstName" #firstName="ngModel">
   </div>
<button type="submit" class="btn btn-default" [disabled]="!candiateForm.form.valid">Submit</button>
</form>

Svar #1

Eftersom Angular tillämpar ngForm på alla form-element implicit och du kan referera till vilken komponent/direktiv som helst i komponentens mall genom komponent-/direktivklassreferens, behöver du inte läsa ElementRef och behöver inte mallreferensen #candiateForm, du kan komma åt formuläret direkt via direktivklassreferensen ngForm:

export class RightPanelComponent implements OnChanges , OnInit{
    @ViewChild(NgForm) form;

    checkFormValidity():boolean {        
        return this.form.valid;
    }

Och du kan också komma åt formuläret direkt från föräldrakomponenten:

export class CandidateVerificationComponent implements OnChanges, OnInit {
    @ViewChild(RightPanelComponent) rightPanelPointer: RightPanelComponent;

    saveAndFinish() {
        if (this.rightPanelPointer.form.valid)

Relaterade artiklar