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允许我在this.filterForm.valid = true方法中设置表单有效性，例如useValue()，但我收到此错误：ERROR TypeError: Cannot set property valid of [object Object] which has only a getter

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

Answer 1

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

<强> 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 +验证模态输入注入的动态形式

1 个答案: