Angular 4 Reactive Form Validator Required показывает ошибку при касании, когда значение задано

Проблема, с которой я столкнулся, заключается в том, что форма показывает ошибку для поля ввода. Я не знаю, почему это проявляется, и, вероятно, из-за непонимания. Итак, у меня есть компонент, называемый командой редактирования. Внутри этого компонента команды редактирования у меня есть поле ввода со значением, установленным для текущего имени команды. Если я сфокусируюсь на текстовом поле ввода, а затем уберу фокус, скажем, фон, тогда форма вызовет «обязательную» ошибку даже с предустановленным и неизменным значением.

<div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value=""
               id="name" class="form-control" name="name" formControlName="name" [value]="nameValue">

    // This is the condition for when the error is shown. 
    // So when the input field is touched, check if an error 
    // exists for the validator required. 
    <div class='form-text error' *ngIf="editTeamFormGroup.controls.name.touched">
        <div *ngIf="editTeamFormGroup.controls.name.hasError('required')" class="help-block error small">Team name is required.</div>
    </div>
</div>

Это конструктор и метод ngOnIt для компонента. Подписка предназначена для наблюдаемого внутри групповой службы, когда команда меняет значения.

constructor(private fb: FormBuilder,
              private teamService: TeamService,
              private router: Router,
              public modalService: ModalService) { }

  ngOnInit() {
    this.teamService.teamChange.subscribe(result => {
      this.team = result;
      this.nameValue = this.team.name;
      this.descriptionValue = this.team.description;
    });


    this.editTeamFormGroup = this.fb.group({
      'name': [ this.nameValue, Validators.required ],
      'description': [ this.descriptionValue, Validators.required ]
    });
  }

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


angular angular-reactive-forms
person Grim    schedule 17.08.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Это потому, что вы настроили форму. Поскольку this.teamService.teamChange является асинхронным, вы не можете гарантировать, что this.nameValue будет настроен до this.editTeamFormGroup.

Если вы подождете, пока не получите необходимую информацию, затем запустите группу форм, все будет работать правильно. И не используйте [value] вместе с formControlName в <input>, если у вас нет на то веской причины.

Шаблон

<form [formGroup]="editTeamFormGroup" *ngIf="editTeamFormGroup">
... 
<div class="form-group">
    <label class="control-label" for="name">Name</label>
    <input tabindex="0" type="text" placeholder="Please enter the team name" title="Please enter the team name" required value=""
               id="name" class="form-control" name="name" formControlName="name">

</form>

Код позади

ngOnInit() {
    this.teamService.teamChange.subscribe(result => {
      this.team = result;
      this.nameValue = this.team.name;
      this.descriptionValue = this.team.description;

      this.editTeamFormGroup = this.fb.group({
        'name': [ this.nameValue, Validators.required ],
        'description': [ this.descriptionValue, Validators.required ]
      });
    });
}
person Harry Ninh    schedule 17.08.2017
comment
Моя реактивная форма показывает ошибки проверки в нетронутых полях. Как я могу это решить? Есть какие-нибудь идеи? - person Ahsan; 13.02.2019