角4反応性フォームバリデーター必須値がプリセットされているときの接触時のエラーを示します

Question

問題は、フォームが入力フィールドにエラーを表示していることです。私はなぜそれが表示されているのか分からないので、おそらく理解の不足が原因です。だから私は編集チームと呼ばれるコンポーネントを持っています。この編集チームのコンポーネントの中には、現在のチーム名に設定された値を持つ入力フィールドがあります。入力テキストフィールドにフォーカスを当ててフォーカスを取り除いて背景を言うと、フォームは値がプリセットされていても変更されていなくても「必須」エラーをトリガーします。

<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 ] 
    }); 
    } 

注：コンソールにエラーはありません。プリセット値に文字を追加してフォーカスを別の要素に変更すると、検証が正常に機能します。

Answer 1

フォームの設定方法です。 this.teamService.teamChangeは非同期であるため、this.editTeamFormGroupより前にが設定されていることを保証することはできません。

必要な情報が得られるまで待ってからフォームグループを開始すると、問題は適切に処理されます。また、[value]とformControlNameを<input>に使用するのは正当な理由がない限り使用しないでください。

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 ] 
     }); 
    }); 
} 

背後

テンプレート

<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> 

コード