Question

<div class="form-group" [formGroup]="gGroup">
  <label for="grouplabel">Group</label>
  <select formControlName="groupControl" [(ngModel)]="groupobj" (ngModelChange)="onSelectGroup($event)" id="group" class="form-control">
        <option>Select</option>
        <option *ngFor="let group of groups" [selected]="current_group === group.name">{{group.name}}</option>
  </select>
</div>

如何在组件中将<select>字段的值动态设置为 Select ？

我查看了https://angular.io/api/forms/FormControlName#use-with-ngmodel文档，但仍然没有可以帮助我的示例。

尝试：

this.gGroup.get('groupControl').setValue('Select');

Answer 1

我想出了一种方法：

<form #f="ngForm">
  <select name="option" ngModel>
    <option value="" disabled>Choose an option</option>
    <option *ngFor="let option of options" [ngValue]="option">
      {{ option.title }}
    </option>
  </select>
</form>

this.f.controls.state.setValue(this.options[0]);

检查我做的这个例子：

https://stackblitz.com/edit/angular-xpeth8

Answer 2

将“反应性表单”和“模板驱动的表单”混合在一起不是一个好主意，即在同一表单控件中将formGroup / formControlName和ngModel绑定在一起。

如果我没记错的话，这在Angular 6中已被弃用，在Angular 7中将被删除。至少那是几天前我在控制台中得到的警告。简而言之，如果需要处理动态表单呈现和复杂表单验证（跨字段验证，自定义验证器等），请使用“反应式表单”，对于需要简单验证的更简单表单，请使用“模板驱动表单”。

现在回到您的问题。在“响应式表单”（在您的特定示例中）中，可以通过以下方式设置值：

this.gGroup.controls[this.groupControl].setValue()

请检查以下链接：https://stackblitz.com/edit/angular-kskgbp

希望这会有所帮助。

Answer 3

如果我们想为formControl内的所有formGroup设置值，则可以使用setValue，或者如果我们想为{{1}的任何一个设置值}放在formControl内，那么我们可以使用formGroup

setValue （假设formGroup有2个formControl）

patchValue

补丁价值

formgroup.setValue({name: ‘Mocrosoft’, age: ‘25’});

或者你可以做，

formgroup.patchValue({name:’Mocrosoft’});

Answer 4

尝试以下已创建的示例。 HTML：

  <form [formGroup]="myform" (ngSubmit)="onSubmit()">
        <label for="grouplabel">Animals</label>
        <select formControlName="animalName" class="form-control">
            <option *ngFor="let animal of animals">{{animal.name}}</option>
      </select>
    </form>

打字稿：

  myform: FormGroup;
  animals: String[] = ["cat", "cow", "elephant"];
  constructor(private formBuilder: FormBuilder) {
   this.myform = this.formBuilder.group({
      animalName : [""]
    })`enter code here`
  }

实时示例：https://stackblitz.com/edit/angular-1bmzur

如何使用FormControl在Angular 6中将值设置为Form

4 个答案: