Angular 表单验证未显示在 Angular 表单错误中答案

【问题标题】：Angular Form validation not showing on Angular form errorAngular 表单验证未显示在 Angular 表单错误中
【发布时间】：2018-09-18 04:54:27
【问题描述】：

这是我的 HTML

 <form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
    <label>Organization Name</label>
      <input type="text" formControlName="appName" id="appName" required>
      <p class="error_message" *ngIf="
      applicationDetailsForm.get('appName').hasError('required') 
      && applicationDetailsForm.get('appName').touched 
      && applicationDetailsForm.get('appName').minLength 
      && applicationDetailsForm.get('appName').maxLength">Provide a valid name</p>

这是我的组件

ngOnInit() {
    this.applicationDetailsForm = this.formBuilder.group({
      appName: new FormControl ('', Validators.compose([Validators.required, Validators.maxLength(32), 
        Validators.minLength(4)]))
})

表单中的错误未显示。请帮忙！

【问题讨论】：

您的提交按钮在哪里？请发布与表单相关的完整代码。
这种情况下有很多&&s。如果您将其中一些注释掉，是否会出现错误消息？
参考此链接，希望对您有所帮助。 stackoverflow.com/a/52354740/8358892

标签： angular forms validation angular-reactive-forms angular-forms

【解决方案1】：

您正在测试 minLength && maxLength 以显示错误消息。它们永远不会同时处于活动状态。

您也没有正确查找 minLength 和 maxLength 错误。它们不是FormControl 本身的直接属性——它们是errors 子属性。

你的运气可能会更好：

*ngIf="
    applicationDetailsForm.get('appName').touched && (
        applicationDetailsForm.get('appName').hasError('required') 
        || applicationDetailsForm.get('appName').hasError('minLength')
        || applicationDetailsForm.get('appName').hasError('maxLength')
    )
"

考虑也采用Angular best practices 通过getter 访问FormControl：

component.ts:

get appName() { return this.applicationDetailsForm.get('appName'); }

component.html:

<form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
    <label>Organization Name</label>
      <input type="text" formControlName="appName" id="appName" required>
      <p class="error_message" *ngIf="appName.touched && (
          appName.errors.required
          || appName.errors.minLength
          || appName.errors.maxLength
      )">Provide a valid name</p>

【讨论】：

【解决方案2】：

您可以使用Validators.pattern

ngOnInit() {
    this.applicationDetailsForm = this.formBuilder.group({
      appName: new FormControl ('', Validators.compose([Validators.required,Validators.pattern('^[a-z0-9]{4,32}$')]))
})

html

<form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
    <label>Organization Name</label>
      <input type="text" formControlName="appName" id="appName" required>
      <p class="error_message" *ngIf="
      applicationDetailsForm.get('appName').hasError('required') && applicationDetailsForm.get('appName').hasError('pattern') 
      >Provide a valid name</p>

这样您就可以更好地控制验证。

【讨论】：

【解决方案3】：

最好为每个验证错误添加单独的错误消息。

<p class="error_message" *ngIf=" applicationDetailsForm.get('appName').hasError('required')">Name is required</p>

<p class="error_message" *ngIf=" applicationDetailsForm.get('appName').minLength">Name length should not be less than 4 charactors</p>

由于您在模板中的验证之间有 &&，因此条件始终为 false。最小长度和最大长度不会同时为真。

【讨论】：

minLength 不起作用，因为您没有在正确的位置寻找它。见my answer。

【解决方案4】：

ts：

ngOnInit() {
  this.applicationDetailsForm = this.formBuilder.group({
    appName: [{value: '', disabled: false}, [Validators.required, Validators.maxLength(32), Validators.minLength(4)]]
  })
}

模板：

<p class="error_message" *ngIf="
      applicationDetailsForm['controls'].appName.hasError('required') 
      || applicationDetailsForm['controls'].appName.touched 
      || applicationDetailsForm['controls'].appName.hasError('minLength') 
      || applicationDetailsForm['controls'].appName.hasError('maxLength')">Provide a valid name
</p>

【讨论】：

【解决方案5】：

您无需编写太多内容即可获得对输入字段的引用。尝试显示这样的错误消息。

 <form [formGroup]="applicationDetailsForm" (ngSubmit)="appDetails(applicationDetailsForm.value)">
    <label>Organization Name</label>
      <input type="text" formControlName="appName" id="appName" required>
      <div *ngIf="appName.invalid && (appName.dirty || appName.touched)">
        <p *ngIf="appName.errors.minlength">
          Name must be at least 4 characters long.
         </p>
        <p *ngIf="appName.errors.maxlength">
          Name must not be more than 10 characters long.
         </p>
       </div>
  </form>

在 .ts 文件中

// create a getter for the form control
get appName() { return this.applicationDetailsForm.get('appName'); }

【讨论】：

这行不通，因为appName 没有被原始代码中的组件公开为FormControl。