Использование нескольких валидаторов и разных сообщений валидатора

поэтому я пытаюсь отображать разные сообщения проверки в зависимости от валидатора в моем элементе управления формой.

Вот что я настроил на данный момент:

this.Form = fb.group ({
      'FooNumber': [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9\\-_]*$')])]
    });

В моем html:

<input formControlName="FooNumber" (blur)="NoSpecialCharacters && !this.Form.get('FooNumber').valid" [ngClass]="!this.Form.get('FooNumber').valid ? 'inputRed': 'input'"/>

<div class="error-msg" *ngIf="!this.Form.get('FooNumber').valid" name="errorMsg"> This is a required field </div>

<div class="error-msg" *ngIf="NoSpecialCharacters && !this.Form.get('FooNumber').valid" name="errorMsg">Enter a valid number </div>

Мой вопрос: я хочу показать сообщение с ngIf «NoSpecialCharacters» для Regex в Validators.pattern () выше, но если поле было пустым и пользователь нажал кнопку «Отправить», должно появиться другое сообщение «Обязательное поле» сообщение.

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

Нужно ли мне создавать собственный валидатор для обработки этого сценария?


angular angular-reactive-forms angular-validation
person Techno_Wizard    schedule 05.04.2018    source источник
comment
Вместо проверки FormControl.valid проверьте FormControl.errors. Различные валидаторы будут добавлять к этому объекту разные ошибки, и вы можете основывать свое условие на этом, чтобы отображать разные сообщения об ошибках.   -  person Harry Ninh    schedule 05.04.2018
comment
Будет ли FormControl.errors включать ошибку шаблона регулярного выражения и требуемую ошибку или только ошибку шаблона регулярного выражения? Я думал, есть ли еще способ различить их. Спасибо!   -  person Techno_Wizard    schedule 05.04.2018

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте это, чтобы улучшить вашу проверку

Если вы используете ReactiveForms, как показано ниже, всегда сохраняйте контроль валидации на сервере.

component.ts

  unamePattern = "^(?=.*[a-z]).{2}[a-zA-Z0-9\\-_]*$";

  isValidFormSubmitted = null;

  Form = this.formBuilder.group({
    FooNumber: ['', [Validators.required, Validators.pattern(this.unamePattern)]]
  });

  constructor(private formBuilder: FormBuilder) {

  }

  onFormSubmit() {
     this.isValidFormSubmitted = false;
     if (this.Form.invalid) {
        return;
     }
     this.isValidFormSubmitted = true;
     this.Form.reset();
  }

  get FooNumber() {
     return this.Form.get('FooNumber');
  }

component.html

<h3>Add Form</h3>
<p *ngIf="isValidFormSubmitted && Form.pristine" [ngClass] = "'success'">
    Form submitted successfully.
</p>
<form [formGroup]="Form" (ngSubmit)="onFormSubmit()">
 <table>
  <tr> 
    <td>User Name: </td>
    <td> 
        <input formControlName="FooNumber">
        <div *ngIf="FooNumber.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
            <div *ngIf="FooNumber.errors.required">
                This is a required field.
            </div>  
            <div *ngIf="FooNumber.errors.pattern">
                Enter a valid number.
            </div> 
        </div>
    </td>
  </tr> 
  <tr>    
    <td colspan="2">
        <button>Submit</button>
    </td>
  </tr>    
 </table>  
</form>

Демо

Надеюсь, это поможет вам улучшить проверку форм. Если у вас есть какие-либо вопросы или сомнения, дайте мне знать.

person Suvethan Nantha    schedule 05.04.2018
comment
Я думаю, что ссылка на Stackbiltz не работает. Можете ли вы дважды проверить? В противном случае я отработаю код в посте. Спасибо большое за вашу помощь! - person Techno_Wizard; 05.04.2018
comment
@Techno_Wizard, можешь проверить сейчас. извините за неудобства. - person Suvethan Nantha; 05.04.2018
comment
@Techno_Wizard Если вас устраивает мой ответ, отметьте его как правильный. Спасибо. - person Suvethan Nantha; 05.04.2018