Почему мой входной валидатор всегда показывает сообщение в Angular 8? - PullRequest
Новая
       38

Почему мой входной валидатор всегда показывает сообщение в Angular 8?

1 голос
/ 26 февраля 2020

У меня есть следующая форма: 

<form [formGroup]="claimForm">
<header class="card-header bg-red">
  <h2>Repairer Information</h2>
</header>
<div class="card-body p-3">
  <div class="tab-content pb-4" id="myTabContent">
    <div class="row my-4">
      <div class="form-group col-sm-6">
        <label for="repairerName">Repairer Contact Name</label>
        <input matInput class="form-control" formControlName="repairerName"
              [(ngModel)]="repairerName">
      </div>
      <div class="form-group col-sm-6">
        <label for="repairerEmail">Repairer Email Address</label>
        <input matInput class="form-control"
          placeholder="Ex. pat@example.com"
          formControlName="emailValidator"
          [formControl]="f.emailFormControl"
          [errorStateMatcher]="matcher"
          [(ngModel)]="repairerEmail">
        <mat-error *ngIf="f.emailValidator.hasError('email') && !f.emailValidator.hasError('required')">
          Please enter a valid email address
        </mat-error>
        <mat-error *ngIf="f.emailValidator.hasError('required')">
          Email is <strong>required</strong>
        </mat-error>
      </div>
    </div>
    <button class="btn btn-icon btn-secondary" [routerLink]="['/claims/create/2']">
      <i class="material-icons">check_circle_outline</i><span>Continue</span>
    </button>
  </div>
</div>
</form>

И это мой файл .ts: 

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

@Component({
  selector: 'app-info',
  templateUrl: './repairer-info.component.html',
  styleUrls: ['./repairer-info.component.scss'],
  animations: [BottomToUpAnimation()]
})
export class InfoComponent implements OnInit {

 repairerEmail = '';

 submitted = false;

 // Form information
 claimForm: FormGroup;

 matcher = new MyErrorStateMatcher();

 constructor(private formBuilder: FormBuilder) { }

 ngOnInit() {
  this.claimForm = this.formBuilder.group({
      emailValidator: [ this.repairerEmail, [Validators.required, Validators.email] ]
  });
  }

  // convenience getter for easy access to form fields
  get f() { return this.claimForm.controls; }

}

Я использовал код из этой ссылки .

Как это должно работать, он скажет, что электронная почта обязательна, когда вы выполняете какое-либо взаимодействие с использованием ввода или отправки. Но мое сообщение об ошибке всегда отображается:

enter image description here

Что я делаю не так? Почему сообщение об ошибке для свойства required отображается всегда, даже если я ничего не делаю со своим вводом?

РЕДАКТИРОВАТЬ: Я пытался удалить заполнитель или установить его в допустимое значение ошибка все еще там. То же самое происходит при попытке удалить ngModel.

...