无法在没有 ngmodel 的情况下以 Reactive 形式 Angular 实现双向绑定

Question

以下是我尝试过的方法，当我在输入字段中添加值后按回车键时，我只看到园艺和绘画，但没有显示我输入的新值。请帮助我了解我在这里做错了什么..

template file:
 <div formArrayName="hobbies">
     <h4>Your Hobbies</h4>
     <input type="text" class="form-group" (keyup.enter)="onAddHobby()">
     <ul class="list-group">
     <li *ngFor="let hobby of signUpForm.get('hobbies')['controls'];let i=index"
         class="list-group-item">{{hobby.value}}</li>
     </ul>
     </div>

typescript file:
ngOnIt{
'hobbies': new FormArray([new FormControl('Gardening'), new FormControl('Painting')])
}

onAddHobby(){
    const control= new FormControl('', Validators.required);
    (<FormArray>this.signUpForm.get('hobbies')).push(control);
  }

Answer 1

因为在 onAddHobby() 方法中，您每次按下回车键时都会推入空的表单控件。从事件中接收值并将其传递给 formControl 看起来像，

在Html,

(keyup.enter)="onAddHobby($event.target.value)"

在 Ts,

onAddHobby(value){
    const control= new FormControl(value, Validators.required);
    (<FormArray>this.signUpForm.get('hobbies')).push(control);
  }

无法在没有 ngmodel 的情况下以 Reactive 形式 Angular 实现双向绑定

Unable to achieve two way binding in Reactive-form Angular without ngmodel

angular-reactive-forms

two-way-binding