我创建了一个带有角度2的表单，并添加了一些客户验证器。现在我想在用户点击提交按钮时触发表单验证。在我刚发现的示例中，只要表单无效，我就会禁用提交按钮，但我希望始终启用提交按钮，当用户点击提交时，表单应该被验证。有谁知道我如何使这项工作和我应该使用哪种打字方法？我找到了updateValueAndValidity方法，但它似乎不适用于此方法。
我创建了一个带有角度2的表单，并添加了一些客户验证器。现在我想在用户点击提交按钮时触发表单验证。在我刚发现的示例中，只要表单无效，我就会禁用提交按钮，但我希望始终启用提交按钮，当用户点击提交时，表单应该被验证。有谁知道我如何使这项工作和我应该使用哪种打字方法？我找到了updateValueAndValidity方法，但它似乎不适用于此方法。
如果您使用的是模板驱动表单，则可以使用以下语法：
<form #f="ngForm" (submit)="add(f.valid)" novalidate>
<button type="submit">Save</button>
</form>
.TS
add(isValid: boolean){
if(isValid){
//do something
}
}
您还可以在提交时添加一些错误，如下所示：
<form #f="ngForm" (submit)="add(f.valid)" novalidate>
<label>Name</label>
<div>
<input [(ngModel)]="name" name="name" #name="ngModel" required>
</div>
<div[hidden]="name.valid || (name.pristine && !f.submitted)">
<small class="text-danger">Please input name</small>
</div>
<button type="submit">Save</button>
</form>
如果您使用的是模板驱动表单，则可以使用以下语法：
<form #f="ngForm" (submit)="add(f.valid)" novalidate>
<button type="submit">Save</button>
</form>
.TS
add(isValid: boolean){
if(isValid){
//do something
}
}
您还可以在提交时添加一些错误，如下所示：
<form #f="ngForm" (submit)="add(f.valid)" novalidate>
<label>Name</label>
<div>
<input [(ngModel)]="name" name="name" #name="ngModel" required>
</div>
<div[hidden]="name.valid || (name.pristine && !f.submitted)">
<small class="text-danger">Please input name</small>
</div>
<button type="submit">Save</button>
</form>
每次更改模型时都应执行验证。但也许你看不到错误信息，因为FormControl没有被触及？ 这是我的解决方案，工作正常。
我通过以下简单步骤完成了它：
@零件（{
选择器：'形式'，
templateUrl：'form.component.html'，
styleUrls：['form.component.scss']
}）
export类FormComponent实现OnInit {
@Output（）submit = new EventEmitter（）;
构造函数（@Optional（）private formGroupDirective：FormGroupDirective）{
}
ngOnInit（）{
if（this.formGroupDirective）{
this.formGroupDirective.ngSubmit.subscribe（（）=> {
this.formGroupDirective.form ['submitted'] = true;
}）;
}
}
}
重要的行在ngOnInit中
检查提交的表单以显示错误
* ngIf =“control？.hasError（'required'）&&（control？.touched || form？.submitted）”
希望有所帮助
（反应表格）
有问题我的解决方案是：
- 模板
<button type="button" (click)="f.ngSubmit.emit(f)">Submit From Outside
form</button>
<form novalidate #f="ngForm" (ngSubmit)="save($event)"
[formGroup]="MyformGroup">
...
</form>
- 班级
@ViewChild('f') f: FormGroupDirective;
submit(formDirective: FormGroupDirective) {
console.log('valid', formDirective.valid);
console.log('value', formDirective.value);
}
这是我用来提交表单的解决方案，其中包含一些不在表单中的按钮。
谢谢