Angular 角度形式验证未显示在角度形式错误上

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

表单中的错误没有显示出来。

---

请帮忙

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

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

名称是必需的
名称长度不应小于4个字符

---

由于模板中的验证之间存在

&&

，因此条件始终为false。“最小长度”和“最大长度”不会同时为真。

如果可以为每个验证错误添加单独的错误消息，则效果更好

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

名称是必需的
名称长度不应小于4个字符

---

由于模板中的验证之间存在

&&

，因此条件始终为false。“最小长度”和“最大长度”将不会同时为真。

您正在测试在您的条件下是否显示错误消息。它们永远不会同时处于活动状态

您也没有正确查找

minLength

和

maxLength

错误。 它们不是

FormControl

本身的直接属性，而是

错误

子属性

您的运气可能会更好：

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

还可以考虑通过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>
  

  
  机构名称
  请提供有效的名称
  

---

您正在测试的

minLength&&maxLength

是否符合显示错误消息的条件。它们永远不会同时处于活动状态

您也没有正确查找

minLength

和

maxLength

错误。 它们不是

FormControl

本身的直接属性，而是

错误

子属性

您的运气可能会更好：

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

还可以考虑通过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>
  

  
  机构名称
  请提供有效的名称
  

---

您不需要写太多就可以获得输入字段的引用。试着像这样显示错误消息

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

---

您不需要写太多就可以获得对输入字段的引用。试着像这样显示错误消息

 <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:
模板：

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

提供有效的名称

ts：
模板：

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

提供有效的名称

您可以使用

验证程序。模式

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

html

机构名称
您可以使用
validator.pattern

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

html


机构名称
提交按钮在哪里？请发布与表单相关的完整代码。在这种情况下有很多
&
s。如果您将其中一些注释掉，是否会出现错误消息？请参阅此链接，这可能会对您有所帮助。提交按钮在哪里？请发布与表单相关的完整代码。在这种情况下有很多
&
s。如果您将其中一些注释掉，是否会出现错误消息？请参阅此链接，这可能会对您有所帮助。这不起作用，因为原始代码中的组件未将
appName
作为
FormControl
公开。这不起作用，因为原始代码中的组件未将
appName
作为
FormControl
公开。
minLength
不起作用，因为您没有在正确的位置查找它。请参阅。
minLength
将不起作用，因为您没有在正确的位置查找它。看见