Angular 角形控件所需的验证器仅在其为表单输入时工作

我有一个带有嵌套表单组的反应式表单，其中一些表单控件需要验证器

似乎只有当用户在表单中输入值时才会进行验证。如果 表单提交时没有用户交互，带有所需验证器的空文本框显示为有效。 这是角形体的正常行为吗？我错过什么了吗

谢谢

皮特

html模板：

<form [formGroup]="ticketMarkForm" (ngSubmit)="submitTicket()">
  ..
   <div formGroupName ="systemForm">
     <mat-form-field appearance="outline">
      <mat-label>Pipe Length (Ft):</mat-label>
      <input matInput type="number" required formControlName="pipeLength">
     </mat-form-field>
</div>
 ..
 <button type="submit" mat-stroked-button>Submit</button>
</form>

检查表单类型脚本的服务：

export class MtMarkFormComponent implements OnInit {
..
ticketMarkForm: FormGroup;
...
constructor(private checkService: MTMarkFormCheckService) { }
 ngOnInit(): void {
 //forms
 this.ticketMarkForm = new FormGroup({
  systemForm: new FormGroup({
    ...
   pipeDiameter: new FormControl(Validators.required),
   ...
  })
  });

}
submitTicket() {
   let pipeDiam:any=this.ticketMarkForm.get('systemForm').get('pipeDiameter');
   this.checkService.CheckRequiredValid(pipeDiam);
   }
}

export class MTMarkFormCheckService {
 CheckRequiredValid(fc: FormControl) {
        if (fc.invalid) {//if the control is left blank/untouched evaluates to valid.  I've also 
  tried to mark the control as dirty (fc.markAsDirty()) but same result
            alert("invalid");
         }
         else {
           alert("valid");
        }
 }

---

这是默认的角度行为。您必须像这样定义自定义错误状态匹配器

import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

export class CustomErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null | undefined, form: FormGroupDirective | NgForm | null): boolean {
    if (control == null) {
      return false;
    }
    return control.invalid;
  }
}

ts:

html:

<input matInput type="number" required formControlName="pipeLength" [errorStateMatcher]="esm">

---

这是默认的角度行为。您必须像这样定义自定义错误状态匹配器

import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
import {ErrorStateMatcher} from '@angular/material/core';

export class CustomErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null | undefined, form: FormGroupDirective | NgForm | null): boolean {
    if (control == null) {
      return false;
    }
    return control.invalid;
  }
}

ts:

html:

<input matInput type="number" required formControlName="pipeLength" [errorStateMatcher]="esm">

---

这句话不太清楚，但会尝试探讨一下

带有所需验证器的空文本框显示为有效

我试图复制您在中描述的问题，但我得到了不同的结论

带有所需验证器的空文本框对于有效属性将返回false

需要注意的是，在触摸表单之前，表单上的验证不会显示

在演示中，我注释掉了行

//this.ticketMarkForm.markAllAsTouched（）

。如果未注释，则验证将显示在表单上

默认情况下，angular将调用

（ngSubmit）='someFunction（）'

（请参阅），但表单状态将无效

---

如果您尝试在中提交表单，您将注意到控制台日志显示false

此语句不是很清楚，但将尝试探索

带有所需验证器的空文本框显示为有效

我试图复制您在中描述的问题，但我得到了不同的结论

带有所需验证器的空文本框对于有效属性将返回false

需要注意的是，在触摸表单之前，表单上的验证不会显示

在演示中，我注释掉了行

//this.ticketMarkForm.markAllAsTouched（）

。如果未注释，则验证将显示在表单上

默认情况下，angular将调用

（ngSubmit）='someFunction（）'

（请参阅），但表单状态将无效

---

如果您尝试在中提交表单，您将注意到控制台日志显示为false

谢谢N.F.我能够应用您的解决方案，但我仍然得到相同的行为。用户必须实际更改控件中的值，并将其保留为空，以获取控件的无效标志自定义错误匹配器就是解决方案。我的问题是当我初始化控件时。我使用：pipeDiameter:newformcontrol（Validators.required）应该使用：pipeDiameter:newformcontrol（“”，[Validators.required]）。我传递了验证器作为第一个参数。这里有一个有效的stackblitz：上面的stackblitz是基于这个感谢N.F.我能够应用你的解决方案，但我仍然得到相同的行为。用户必须实际更改控件中的值，并将其保留为空，以获取控件的无效标志自定义错误匹配器就是解决方案。我的问题是当我初始化控件时。我使用：pipeDiameter:newformcontrol（Validators.required）应该使用：pipeDiameter:newformcontrol（“”，[Validators.required]）。我传递了验证器作为第一个参数。这里有一个有效的stackblitz：上面的stackblitz是基于这个感谢Owen-我可以看到表单总是无效的，不管输入是什么。我将尝试在没有材料表单输入的情况下构建一个stackblitz，看看会发生什么感谢Owen-我可以看到表单总是无效的，不管输入是什么。我将尝试在没有材料表单输入的情况下构建一个stackblitz，看看会发生什么