如何在 Angular 7 响应式表单中设置 HTML Select Element 的选定值？

Posted 2023-03-13

【中文标题】如何在 Angular 7 响应式表单中设置 HTML Select Element 的选定值？

【英文标题】：How to set selected value of HTML Select Element in Angular 7 reactive forms?

【发布时间】：2019-06-21 19:29:31

【问题描述】：

我在我的组件中使用Angular 7 reactive forms。我的组件的一部分：

@Component(
  selector: 'my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.scss']
)
export class MyFormComponent implements OnInit 
  form: FormGroup;
  loaded: boolean = false;
  item: Item;
  // item gets loaded from the server and looks like this:
  // 
  //   id: 'dksldfkfjdk',
  //   title: 'first',
  //   selected: 'basic'
  // 
  itemsForSelect = ['basic', 'primary', 'admin'];
  isNew: boolean = false;

  constructor(private route: ActivatedRoute,
    private resourceService: ResourceService,
    private fb: FormBuilder,
    private router: Router) 
  

  ngOnInit() 

    this.resourceService.getItem().subscribe(res => 

      if (res.success) 
        this.item = res.item;
        this.createForm();
        this.loaded = true;
      
    );
  

  createForm() 
    this.form = this.fb.group(
      'title': [this.item.title, Validators.compose([])],
      'selected': [this.item.selected, Validators.compose([])]
    );
  

部分组件HTML模板相关form:

<form [formGroup]="form" (ngSubmit)="isNew ? create() : update()" [class.error]="!form.valid && form.touched">
  <div class="form-group">
    <label for="item"></label>
    <select placeholder="Choose Select" [formControl]="form.controls.selected" class="form-control"
      id="item">
      <option *ngFor="let itemForSelect of itemsForSelect"> itemForSelect </option>
    </select>
  </div>
  <button class="btn btn-primary udpate pointer" [disabled]="!form.valid" type="submit">
     isNew ? 'Create' : 'Update' 
  </button>
</form>

问题在于，在使用例如admin 值更新item 后，它在属性selected 中具有来自服务器的此值，但在获取数据和显示形式。如何在 Angular 7 中设置选中？我知道我可以使用[(ngModel)] = item.selected，但是当我使用form.controls 时，我会在控制台中收到警告。

【参考方案1】：

您可以像这样在表单控件上使用 patchValue：

public updateValue() 
this.form.get('selected').patchValue('basic');

改进：不要在同一个表单控件中使用 formControl 和 formControlName。这是更深层次的链接explanation

【讨论】：

还是不行。问题出在select HTML element 上。对于其他元素（输入），一切正常。表单在加载项目后创建。虽然项目已选择属性admin，但HTML select element 的选定值是basic。

Dont use formControl with formControlName - 谢谢，我已经更正了那部分

【参考方案2】：

您需要在选项中添加 [value] 属性

 <option
        [value]="itemForSelect"
        *ngFor="let itemForSelect of itemsForSelect"
  > itemForSelect </option>

沙盒：https://codesandbox.io/s/angular-l0d09