Блог

Главная - Вопросы по программированию - Ошибка Mat не отображает ошибку для пользовательских валидаторов, но шаблон отображает ошибку

Ошибка Mat не отображает ошибку для пользовательских валидаторов, но шаблон отображает ошибку

#angular #angular-material #angular-reactive-forms #angular-custom-validators #mat-error

Вопрос:

app.component.html

     <div class="col-sm-3">
                            <mat-form-field class="col-sm-3" appearance="outline"
                                class="example-full-width input-small-size d-block">
                                <mat-label>Personal Phone 1
                                </mat-label>
                                <input matInput formControlName="phonePersonal01" type="number">
                                <mat-error *ngIf="personalform.errors?.invalidPhoneMatch">
                                    Enter different numbers.
                                </mat-error>
<!-- This error is not displaying -->
                            </mat-form-field>{{personalform.errors|json}} 
    <!-- Output is : { "invalidPhoneMatch": true }-->
                        </div>

приложение.компонент.ts

 personalform = this.fb.group({

        
        
        phno: ['', [Validators.required, Validators.pattern('\ {0,1}[0-9]{10,12}')]],
        phonePersonal01: ['', [Validators.required, Validators.pattern("\ {0,1}[0-9]{10,12}")]],
        phonePersonal02: ['', [Validators.required, Validators.pattern("\ {0,1}[0-9]{10,12}")]],
    
      }, { validator: this.checkContactNumbers }
      );

…

 checkContactNumbers(c: FormBuilder) {
    //safety check
    console.log(c[`value`][`phno`]);
    console.log(c[`value`][`phonePersonal01`]);

    if (c[`value`][`phno`] == c[`value`][`phonePersonal01`])
    {
      console.log('this ran');
      
      return { invalidPhoneMatch: true }
    }
  
  }

Я пытаюсь использовать пользовательский валидатор. канал json html-формы показывает вывод, но ошибка mat не отображает вывод.

Ответ №1:

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

 <mat-error *ngIf="personalform.hasError('invalidPhoneMatch')">

Второй. Способ, которым вы создаете свой объект ошибки, также неверен. У вас должна быть такая структура:

 return {invalidPhoneMatch: {value: true}};

Второй подход

Сделайте валидатор валидатором контроллера поля формы.

 personalform = this.fb.group({
    phno: ['', [Validators.required, Validators.pattern('\ {0,1}[0-9]{10,12}')]],
    phonePersonal01: ['', [Validators.required, this.checkContactNumbers, Validators.pattern("\ {0,1}[0-9]{10,12}")]],
    phonePersonal02: ['', [Validators.required, Validators.pattern("\ {0,1}[0-9]{10,12}")]],
});

Комментарии:

1. Если я передаю его в формате json {{personalform.hasError('invalidPhoneMatch')|json}} , значение меняется с fals на true, что совершенно нормально, но ошибка по-прежнему не заполняется

2. Если то же самое я пишу в теге div, то это работает.

3. Даже я добивался этого до этого момента, мои сомнения обоснованны. Не понижайте голос, если я прошу о помощи

4. Ну, у меня сложилось впечатление, что это связано с тем фактом, что вы получаете ошибку, personalform но пытаетесь показать ее внутри сферы phonePersonal01 . Я имею в виду, что этот конкретный элемент управления формой знает, что у него самого нет ошибок, но теперь он вынужден их показывать. Я считаю, что этого не предвидится. Попробуйте официально включить этот валидатор в список валидаторов phonePersonal01 . это должно сработать.

Метки: ,