Javascript 使用angular 2进行动态表单验证

我正在处理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>

{{data.displayName}
名称是必需的

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

---

基于您的plunkr创建了plunker链接，我认为您最好使用模板驱动的表单方法，而不是您描述的模板驱动的表单方法，因为您在模型中定义表单字段（在

AppComponent

中定义的

fieldsData

数组）

当前模板方法没有提供您想要的验证行为，因为子组件中的

输入

字段没有参与更广泛的表单-如果调试

loginForm.value

，您将看到名称字段不是表单的一部分-这意味着如果您提交表单，表单将不包含在这些字段中输入的数据

另一种方法是通过实现所述的

ControlValueAccessor

使子组件参与表单，但这会增加您可能不需要的复杂性

一个更简单的方法是（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>

{{data.displayName}
{{data.displayName}}是必需的
提交
表单包含：{loginForm.value | json}

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>

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

{{data.displayName}
{{data.displayName}}是必需的



提交

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

app.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>

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

表单验证

@Gabrielb David表单字段加载到子部分模板中。我将字段作为输入传递给模板我相信这是因为您的输入位于子组件中。您必须为父组件提供一种查看所有字段是否已填充的方法。为什么不把整个表单放在一个组件中？@GabrieleB David你是对的。（假设）我正在使用可重用组件创建表单字段。那么父表单元素没有保留子表单元素？那么您可以使用

@Output

事件，当所有表单都在子表单中填充时触发该事件。也许这个答案会有所帮助@PraveenMP我更新了我的答案，我发现这不起作用。使用时！loginForm.invalid用于禁用的按钮，但由于反向条件，即使在填写表单后，它也会完全禁用该按钮。我不知道是什么原因导致它。但是如果你将表单部分完全移动到一个组件中，并将该组件移动到另一个组件中，那么上面的方法是有效的。但我不想在主组件中保留子部分代码。