Angular2 + Validation du formulaire dynamique sur l'injection d'entrée modale

Question

J'ai un formulaire dans lequel vous pouvez ajouter des entrées dynamiques. Ces entrées peuvent être saisies ou vous pouvez ajouter du texte à partir d'un modal en sélectionnant une valeur.

Lors de la saisie dans l'entrée, le formulaire est validé, mais la sélection d'une valeur dans le modal ne valide pas le formulaire même si l'entrée est remplie.

Voici une version simplifiée de mon modèle:

// 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> 

Imaginez ma logique fonctionne parfaitement. Voici mon code JavaScript (tapuscrit):

// 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(); 
} 

Lorsque je tape dans l'entrée du formulaire est validé, mais la sélection d'une valeur du modal et injecter cette valeur dans l'entrée de la forme ne valide pas la forme.

Je souhaite me angulaire permettent de définir la validité de forme comme this.filterForm.valid = true dans ma méthode useValue(), mais je reçois cette erreur: ERROR TypeError: Cannot set property valid of [object Object] which has only a getter

Laissez-moi savoir si vous avez des suggestions pour valider ma forme comme par magie. Merci!

Answer 1

J'ai été en mesure de résoudre ce problème en utilisant @ViewChild référençant #filterButton dans le modèle, puis en jouant avec l'attribut disabled dans son nativeElement dans ma méthode useValue().

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>