Question

我在组件中使用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([])]
    });
  }
}

与form相关的组件HTML模板的一部分：

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

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

Answer 1

您可以像这样在窗体控件上使用patchValue：

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

}

改进：不要在同一窗体控件中将formControl与formControlName一起使用。这是指向更深的explanation

的链接

Answer 2

您需要将[value]属性添加到选项

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

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

如何设置Angular 7反应形式的HTML Select元素的选定值？

2 个答案: