Угловой реактивный валидатор формы показывает сообщение об ошибке изначально?

Question

У меня есть один образец для проверки реактивной формы.сначала отображается сообщение об ошибке проверки, прежде чем мы введем значение.

ожидаемое поведение, после ввода значения должно отображаться сообщение об ошибке

образец ссылки

Answer 1

Создайте службу формы и используйте Отметьте FormGroup Touched , чтобы она по умолчанию не отображала сообщения об ошибках

import { FormService } from './services/form';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})

export class AppComponent  {
 public testForm: FormGroup;

ngOnInIt(){
 this.testForm.valueChanges.subscribe((data) => {
    this.FormService.markFormGroupTouched(this.testForm);
})
}
}

Answer 2

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

 <div *ngIf="check.errors.required && check.touched" class="e-error">
                This field is required.
 </div>

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

Вы получите больше информации и пример здесь: Встроенные валидаторы и Реактивные валидаторы формы