Question

我正在处理angular 2应用程序并在子部分模板中动态创建表单字段（使用json）。
我想在表单无效时禁用提交按钮。

<h1>Form Validation</h1>
<div >
<form #loginForm="ngForm">
    <subsection [question]="fieldsData"></subsection>
    <button  type="submit"  [disabled]="!loginForm.form.valid">Submit</button>
</form>
</div>

子节如下：

<div *ngFor="let data of question">
<label> {{data.displayName}}</label>
<input type="data.dataType" name="data.fieldId" [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel">
<div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
    <div [hidden]="!name.errors.required">
        Name is required
    </div>     
</div>
<br><br>

我有一个要求，即在填写所有必填字段后应启用提交按钮

创建了plunker链接Here

Answer 1

基于您的plunkr，我认为使用reactive form而不是您所描述的模板驱动表单方法会更好，因为您无论如何都要在模型中定义表单字段（{{1} fieldsData）中定义的数组。

当前模板方法没有为您提供所需的验证行为，因为子组件中的AppComponent字段未参与更广泛的表单 - 如果您调试input，您将看到名称字段不是表单的一部分 - 这意味着如果您提交表单，表单将不包含在这些字段中输入的数据。

另一种方法是通过实施here所述的loginForm.value来使子组件参与表单，但这会增加您可能不需要的复杂性。

更简单的方法是（1）使用反应形式或（2）根本不使用嵌套的子部分。

ControlValueAccessor

Answer 2

<强> question.component.html

<form #loginForm="ngForm">
<div *ngFor="let data of question">
    <label> {{data.displayName}}</label>
    <input type="data.dataType"  [(ngModel)]="data.fieldValue" required name="data.fieldId" #name="ngModel">
    <div *ngIf="name.errors && (name.dirty || name.touched)" class="alert alert-danger">
        <div [hidden]="!name.errors.required">
            {{data.displayName}} is required
        </div>     
    </div>
    <br><br>
</div>
<button  type="submit"  [disabled]="loginForm.invalid">Submit</button>
</form>

以上功能会禁用提交按钮，您可以使用上述按钮激活* ngIf。你也可以使用上面的！loginForm.valid。

<强> app.component.html

<h1>Form Validation</h1>
    <subsection [question]="fieldsData"></subsection>

使用角度2

2 个答案: