javascript - 使用 Angular 2 进行动态表单验证

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而不是您描述的模板驱动表单方法，因为您无论如何都在模型中定义表单字段(AppComponent 中定义的 fieldsData 数组)。

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

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

更简单的方法是 (1) 使用响应式表单或 (2) 根本不使用嵌套的小节组件。

<form #loginForm="ngForm">

   <div *ngFor="let data of fieldsData">
      <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>
      </div>
   <button  type="submit"  [disabled]="!loginForm.form.valid">Submit</button>

   Form contains: {{loginForm.value | json }}

</form>