Angular2 + Validieren dynamisches Formular bei modaler Eingabe Injektion

Question

Ich habe ein Formular, wo Sie dynamische Eingaben hinzufügen können. Diese Eingaben können eingegeben werden, oder Sie können Text aus einem Modal hinzufügen, indem Sie einen Wert auswählen.

Wenn in den Eingang der Eingabe das Formular validiert wird, sondern einen Wert aus dem modalen Auswahl bestätigt nicht die Form, auch wenn die Eingabe aus gefüllt ist.

Hier ist eine vereinfachte Version meiner Vorlage:

// form.component.html 
<form #filterForm="ngForm"> 
    <table> 
     <tbody> 
      <tr *ngFor="let data of droppedData; let i = index"> 
       <td>{{data.label}}</td> 
       <td><input type="text" required #moduleValue[i]="ngModel"></td> 
      </tr> 
     </tbody> 
    </table> 
</form> 

<modal> 
    <ul *ngFor="let data of ['value1', 'value2', 'value3']"> 
     <li (click)="selectValue()">{{data}}</li> 
    </ul> 
    <button type="button" (click)="useValue()">Use Value</button> 
</modal> 

Stellen Sie sich meine Logik perfekt funktioniert. Hier ist mein JavaScript (Typoskript) Code:

// form.component.ts 
selectValue(): void { 
    this.selectedValues = []; 
    for (let value of this.selectedValues) selectedValues.push(value); 
} 

useValue(): void { 
    this.filterForm.nativeElement.getElementsByTagName('input')[dynamicValueIndex].value = this.selectedValues; // appends selectedValue to form 

    /**************************************** 
    *INSERT MAGICAL VALIDATE FORM LOGIC HERE 
    ****************************************/ 

    this.modal.hide(); 
} 

Wenn ich gebe in das Eingabe des Formular validiert wird, sondern einen Wert aus dem modalen Auswahl und Injizieren diesen Wert in die Eingabe des Formulars nicht die Form überprüfen.

Ich wünsche Angular mir erlauben würde, wie this.filterForm.valid = true in meiner useValue() Methode, um die Form Gültigkeit zu setzen, aber ich habe diesen Fehler: ERROR TypeError: Cannot set property valid of [object Object] which has only a getter

Lassen Sie mich wissen, wenn Sie irgendwelche Vorschläge auf magische Weise meine Form zu validieren. Vielen Dank!

Answer 1

Ich konnte dies beheben, indem Sie @ViewChild Referenzieren #filterButton in der Vorlage und dann mit dem deaktivierten Attribut in seiner nativeElement in meiner useValue() Methode.

form.component.ts

@ViewChild('filterButton') filterButton: any; 

// other code 

private useValue(): void { 
    // some more other code 
    this.filterButton.nativeElement.disabled = false; 
} 

form.component.html

<button #filterButton type="button" (click)="useValue()">Use Value</button>