角度表单验证未显示在Angular表单错误上

Question

这是我的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)]))
})

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

Answer 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通过吸气剂访问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>

Answer 2

如果您可以为每个验证错误添加单独的错误消息，那就更好了。

<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。最小长度和最大长度不会同时为真。

Answer 3

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>

Answer 4

您不需要编写太多内容来获取对输入字段的引用。尝试显示这样的错误消息。

 <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'); }

Answer 5

你可以使用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>

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