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

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

 <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 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>

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>

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

Angular Form验证未显示在Angular Form错误上

5 个答案: