模板驱动表单表单内部组件的验证

Question

我正在尝试验证表单中的组件

<form #f="ngForm" novalidate (ngSubmit)="submitForm()">
<app-form-component [f]="f" [model]="model" ></app-form-component>
<button>Submit</button>
</form>

表单组件:

<input type="number"
#test="ngModel"
name="test"
required
[ngClass]="{ 'is-invalid': f.submitted && test.invalid }"
[(ngModel)]="model">

当我提交表单时，我在输入字段中得到一个错误，但函数submitForm仍然被调用。

Answer 1

<form #f="ngForm" novalidate (ngSubmit)="CheckModelValid()?submitForm():''">

组件文件添加一个返回模型有效或不有效的函数调用

CheckModelValid(){
..... 
return true // on valid
}

您还可以通过以下方式检查验证:

<form #f="ngForm" novalidate (ngSubmit)="f.form.valid && submitForm()">

如果form是有效的，那么只调用submitForm函数。