我正在开发 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
最佳答案
根据你的 plunkr,我认为使用 reactive form 会更好。而不是您所描述的模板驱动表单方法,因为您无论如何都在模型中定义表单字段( fieldsData
中定义的 AppComponent
数组)。
当前的模板方法无法为您提供所需的验证行为 input
子组件中的字段不参与更广泛的形式 - 如果您调试 loginForm.value
您将看到名称字段不是表单的一部分 - 这意味着如果您提交表单,表单将不包含在这些字段中输入的数据。
另一种方法是通过实现 ControlValueAccessor
让子组件参与表单如上所述here但这会增加您可能不需要的复杂性。
更简单的方法是 (1) 使用响应式(Reactive)表单或 (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>
关于javascript - 使用 Angular 2 进行动态表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42836550/