如何在不禁用角度（v4）中的提交按钮的情况下触发所有验证？-Java 学习之路

我想在提交数据之前检查表单字段的所有验证，点击提交按钮并激活缺失或错误的字段验证

就像之前版本的angular on submit一样，如果表单状态无效，我们可以触发所有错误验证

if (scope.sampleForm.$valid) {
 // success code
} else {
    angular.forEach(scope.sampleForm.$error, function (field) {
           angular.forEach(field, function (errorField) {
                  errorField.$setTouched();
           })
    });                   
}

我检查了很多与此相关的答案，如果表格无效，大多数答案都是禁用提交按钮，我想在没有禁用按钮的情况下实现这一点，请建议我如何实现这一目标？我正在使用模板驱动的方法角（v4）

2 回答

0
如何引入一个新变量，例如 submitted ，然后为表单控件 firstname 设置类似下面的条件：
```
<div *ngIf="submitted && !firstname.valid">
  
</div>
```
在您的提交方法上，如果表单无效，您只需将此标志设置为 true ：
```
(ngSubmit)="onSubmit(myForm)"
```
TS：
```
onSubmit(form) {
  if(!form.valid) {
    this.submitted = true;
  }
  else {
    // valid, do something
  }
}
```
回复于 2024-04-29T16:04:08+08:00
0
您必须将html name属性添加到表单的每个输入 . name属性指定表单实例上的属性名称 .
```
<form #f="ngForm" novalidate>

<md-input-container>
  <input mdInput type="text"
         placeholder="Name"
         name = "name"
         [(ngModel)] = "user.name"
         #userName = "ngModel"
         minlength="4"
         required
         nameRahul>
</md-input-container>
<div *ngIf="formErrors.name[0]">
  <div *ngFor = "let data of formErrors.name" class="alert alert-danger">
    {{data}}
  </div>
</div>
</form>
```
您可以使用表单控件并检查字段是否脏 . 检查这两个文件以便更好地理解

https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/template-driven/template-driven.component.html

https://github.com/rahulrsingh09/AngularConcepts/blob/master/src/app/template-driven/template-driven.component.ts

https://rahulrsingh09.github.io/AngularConcepts/#/template
回复于 2024-04-29T16:04:08+08:00

如何在不禁用角度（v4）中的提交按钮的情况下触发所有验证？

2 回答

相关问题