I have a form where you can add dynamic inputs. These inputs can be typed or you can add text from a modal by selecting a value.
When typing into the input the form gets validated, but selecting a value from the modal does not validate the form even though the input is filled out.
Here is a simplified version of my template:
// 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>
// 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();
}
this.filterForm.valid = true
useValue()
ERROR TypeError: Cannot set property valid of [object Object] which has only a getter
I was able to resolve this by using @ViewChild
referencing #filterButton
in the template and then playing with the disabled attribute in its nativeElement in my useValue()
method.
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>