Angular2+ 验证模态输入注入的动态形式

Question

我有一个表单，您可以在其中添加动态输入。可以键入这些输入，或者您可以通过选择一个值从模式添加文本。

在输入中输入时，表单会得到验证，但从模式中选择一个值不会验证表单，即使输入已填写。

这是我的模板的简化版本：

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

想象一下我的逻辑完美无缺。这是我的 JavaScript (TypeScript) 代码：

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

当我输入输入时，表单得到验证，但从模式中选择一个值并将该值注入表单的输入不会验证表单。

我希望 Angular 允许我在我的 useValue() 方法中像 this.filterForm.valid = true 一样设置表单有效性，但我收到此错误：ERROR TypeError: Cannot set property valid of [object Object] which has only a getter

如果您有任何神奇地验证我的表单的建议，请告诉我。谢谢！

Answer 1

我能够通过在模板中使用 @ViewChild 引用 #filterButton 然后在我的 useValue() 方法中使用其 nativeElement 中的禁用属性来解决这个问题。

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>

Angular2+ 验证模态输入注入的动态形式

Angular2+ Validate dynamic form on modal input injection

javascript

forms

validation

angular2-forms

angular