Question

我试图动态设置选择值，但是即使使用检测更改也不会反映更改。

组件：

export class AppComponent implements OnInit {

  constructor(private cd: ChangeDetectorRef) {

  }
  genders=['male','female'];
  SignupForm:FormGroup;

  ngOnInit(){
    this.SignupForm = new FormGroup({
      'gender':new FormControl(),
    });
  }

  onSubmit(){
    console.log(this.SignupForm);
  }

  setGender() {
    this.SignupForm.controls.gender.setValue(this.genders[1]);
    console.log(this.SignupForm.controls.gender.value);
    this.cd.detectChanges();
  }
}

模板：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
            <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
                <select fromControlName="gender">
         <option *ngFor="let g of genders">{{g}}</option>
       </select>

        <button class="btn btn-primary" type="submit">Submit</button> 
      </form>
    </div>
  </div>
</div>

<button class="btn btn-primary" (click)="setGender()">Set Female</button>

Stackblitz

Answer 1

您有一个很小的错误，请参阅：

<select fromControlName="gender">

更改方式：

<select formControlName="gender">

Answer 2

我认为您可以尝试如下所示的方法，这是通过让select / option读取表单控件的值来选择<option *ngFor="let g of genders" [selected]="gender.value">{{g}}</option>的默认选项，该值将在组件生命周期的早期设置

解决方案

将此添加到您的选项中以将默认值设置为表单值。

public ngOnInit(): void {
this.SignupForm = new FormGroup({
  'gender':new FormControl(),
 });
}

public setGender(): void
{
     this.gender.setValue(this.genders[1]);
     this.cd.detectChanges();
     console.log(this.gender) // just check here the value is set correct.  
}

public get gender(): AbstractControl
{
    return this.SignupForm.controls['gender']
}

然后在您的组件中。

{{1}}

这应该提供所需的功能。看起来有点整洁。这是article 有人写了这个话题。一切顺利。

如何使用反应形式设置选择值并遍历数组

2 个答案: