Как отображать различные сообщения об ошибках на основе пользовательского ввода в Angular 6

Я новичок в angular 6, здесь я хочу проверить поле ввода пользователя и отобразить различные сообщения об ошибках на основе заданного ввода.

В своем проекте я использую дизайн Angular Material для пользовательского интерфейса.

Что я хочу сделать, это

  • Если пользователь нажимает кнопку «Сохранить», отображается сообщение об ошибке в виде «Введите имя FName».
  • Если пользователь коснулся, но ничего не ввел и нажал кнопку «Сохранить», отобразится сообщение об ошибке в виде «Введите свое FName».
  • Если пользователь начал вводить символ, должно появиться сообщение об ошибке: «требуется минимум 4 символа».
  • Как только пользователь достигнет 15 символов, должно появиться сообщение об ошибке «Максимум 20 символов».
  • Если пользователь вводит какой-либо специальный символ и пробел, а также другой ввод, появляется сообщение об ошибке в виде «Вводите только алфавиты».

Теперь он меняется на КРАСНЫЙ цвет, когда ввод не соответствует успешной проверке. Но я хочу отображать сообщение об ошибке для каждой проверки в formControl.

Здесь у меня есть поле ввода мат.

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
    </mat-form-field>
</form>

<button mat-raised-button class="continueBtnHeight" color="warn">
<span>Save</span>
</button>

Ts файл

export class ButtonToggleOverviewExample {
  userAddressValidations: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.userAddressValidations = this.formBuilder.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), Validators.pattern('[a-zA-Z]+')]]
    });

  }
}

stackblitz: https://stackblitz.com/edit/angular-t1k1x6-skowwq?file=app%2Fbutton-toggle-overview-example.ts

может ли кто-нибудь помочь мне решить эту проблему.


typescript angular angular-material angular6
person Zhu    schedule 19.09.2018    source источник
comment
Используйте 1_   -  person Antoniossss    schedule 19.09.2018

Ответы (3)


arrow_upward
3
arrow_downward

Попробуй это:

<form class="example-form" [formGroup]="userAddressValidations">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name" formControlName="firstName">
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('required')">
      First Name is Required!
    </mat-error>
    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('minlength')">
      First Name should be atleast 4 characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('maxlength')">
      First Name can be atmax n characters long!
    </mat-error>

    <mat-error *ngIf="userAddressValidations.get('firstName').hasError('pattern')">
      First Name must follow this pattern!
    </mat-error>
  </mat-form-field>

</form>

Вот Образец StackBlitz для вашего исх.

person SiddAjmera    schedule 19.09.2018
comment
Он показывает, что требуется только проверка FirstName. другие сообщения не работают. @SiddAjmera - person Zhu; 19.09.2018
comment
Обновил ответ. Возникла проблема с именами ошибок. minLength должно было быть minlength - person SiddAjmera; 19.09.2018
comment
Здесь, если пользователь начинает со специального символа, сообщение об ошибке должно быть таким, как имя должно следовать этому шаблону! вместо минимальной ошибки символа. Если я прав, как это сделать, брат @SiddAjmera - person Zhu; 19.09.2018
comment
Возможно, вы захотите изменить последовательность сообщений об ошибках. Я думаю, есть приоритетная последовательность. Хотя я не уверен. - person SiddAjmera; 19.09.2018
comment
Сидд, прав. @Zhu. Просто измените порядок вашего ts. файл - person devpato; 19.09.2018
comment
не могли бы вы помочь мне решить эту проблему stackoverflow.com/questions/52417652/ @SiddAjmera - person Zhu; 20.09.2018

arrow_upward
1
arrow_downward

используйте hasError('invalidName'), если пользователь вводит какой-либо специальный символ и пробел

Stackblitz

Component.html

<form [formGroup]="userAddressValidations">

    <label>User Name : 
        <input type="text"  formControlName="firstName">
    </label><br>

    <div class="errors" *ngIf="userAddressValidations.get('firstName').invalid && (userAddressValidations.get('firstName').touched || userAddressValidations.get('firstName').dirty)">

        <div *ngIf="userAddressValidations.get('firstName').hasError('required')">
            Please enter your FName
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.minlength">
            minimum 4 char required
        </div>

        <div *ngIf="userAddressValidations.get('firstName').errors.maxlength">
            Maximum 20 char only
        </div>

        <div class="error-text" *ngIf="userAddressValidations.get('firstName').hasError('invalidName')">
            Enter only alphabets
        </div>
    </div>

</form>

Component.ts

this.userAddressValidations = fb.group({
      firstName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20), usernameValidator]]
});

имя пользователя.validators.ts

import { AbstractControl, ValidationErrors } from "@angular/forms"

export const usernameValidator = function (control: AbstractControl): ValidationErrors | null {

  let value: string = control.value || '';

  if (value) {
    const matches = value.match(/^[a-zA-Z]+$/);
    return matches ? null : { 'invalidName': true };
  } else {
    return null;
  }
}
person Krishna Rathore    schedule 19.09.2018
comment
Здесь, если пользователь начинает со специального символа, сообщение об ошибке должно быть таким, как имя должно следовать этому шаблону! вместо минимальной ошибки символа. Если я прав, как это сделать, брат @Krishna Rathore - person Zhu; 19.09.2018
comment
добавьте это условие ‹div * ngIf =! userAddressValidations.get ('firstName'). hasError ('invalidName') && userAddressValidations.get ('firstName'). errors.minlength› требуется минимум 4 символа ‹/div› - person Krishna Rathore; 19.09.2018

arrow_upward
0
arrow_downward

Взгляните на этот учебник https://codecraft.tv/courses/angular/forms/model-driven-validation, вы также можете сослаться на этот вопрос о переполнении стека: Отображать ошибку настраиваемого валидатора с ошибкой мат

Но вот небольшой пример:

<form [formGroup]="userAddressValidations" novalidate>
    <mat-form-field appearance="outline" class="col-sm-6">
        <mat-label>First Name</mat-label>
        <input matInput formControlName="firstName">
         <mat-error *ngIf="email.errors.required">{{getErrorMessage()}}</mat-error>
         <mat-error *ngIf="email.errors.minlength">{{getErrorMessage()}}</mat-error>
    </mat-form-field>
</form>
person devpato    schedule 19.09.2018