Проверка угловой формы не отображается при ошибке угловой формы - PullRequest
Новая
       15

Проверка угловой формы не отображается при ошибке угловой формы

0 голосов
/ 18 сентября 2018

Это мой 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)]))
})

Ошибки в формах не отображаются.Пожалуйста, помогите!

Ответы [ 5 ]

0 голосов
/ 18 сентября 2018

Вы можете использовать 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>

, таким образом вы получите больший контроль над проверкой.

0 голосов
/ 18 сентября 2018

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>
0 голосов
/ 18 сентября 2018

Вы проверяете на 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 лучших практик для доступа к 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>
0 голосов
/ 18 сентября 2018

Вам не нужно так много писать, чтобы получить ссылку на поле ввода.Попробуйте отобразить сообщения об ошибках следующим образом. 

 <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'); }
0 голосов
/ 18 сентября 2018

Лучше, если вы добавите отдельные сообщения об ошибках для каждой ошибки проверки. 

<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 . Минимальная длина и максимальная длина не будут истинными одновременно.

...