Как отображать различные сообщения об ошибках на основе пользовательского ввода в 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
может ли кто-нибудь помочь мне решить эту проблему.
Ответы 3
Взгляните на этот учебник https://codecraft.tv/courses/angular/forms/model-driven-validation, вы также можете сослаться на этот вопрос о переполнении стека: Отображать ошибку настраиваемого валидатора с ошибкой mat
Но вот небольшой пример:
<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>
Попробуй это:
<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 для вашего исх.
Он показывает, что требуется только проверка FirstName. другие сообщения не работают. @SiddAjmera
Обновил ответ. Возникла проблема с именами ошибок. minLength должен был быть minlength
Здесь, если пользователь начинает со специального символа, сообщение об ошибке должно быть таким, как "Имя должно следовать этому шаблону!" вместо минимальной ошибки символа. Если я прав, как это сделать, брат @SiddAjmera
Возможно, вы захотите изменить последовательность сообщений об ошибках. Я думаю, есть приоритетная последовательность. Хотя я не уверен.
Сидд, прав. @Zhu. Просто измените порядок вашего ts. файл
не могли бы вы помочь мне решить эту stackoverflow.com/questions/52417652/… @SiddAjmera
используйте hasError('invalidName'), если пользователь вводит какой-либо специальный символ и пробел
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]]
});
username.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;
}
}
Здесь, если пользователь начинает со специального символа, сообщение об ошибке должно быть таким, как "Имя должно следовать этому шаблону!" вместо минимальной ошибки символа. Если я прав, как это сделать, брат @Krishna Rathore
добавьте это условие <div * ngIf = "! userAddressValidations.get ('firstName'). hasError ('in validName') && userAddressValidations.get ('firstName'). errors.minlength"> требуется минимум 4 символа </div>
Используйте
mat-error