Question

我正在努力将select元素包装为具有其他功能的组件（称为select-ddl）。在发现在调用setValue或patchValue时FormGroup没有自动选择正确的选项之前，我并没有讨论“其他功能”。

对我而言，真正没有意义的是验证有效，并且如果我在下拉列表中选择一个值，则调用this.form.value会返回正确的结果，并设置companyId。我相信这意味着Angular正在正确设置SelectControlValueAccessor，以便将FormControl连接到DOM元素。

person-edit.component.ts包含：

id = 0;
form: FormGroup;
record: PersonViewModel = new PersonViewModel();
companies: NameViewModel[] | undefined;

constructor(
  private dataService: PeopleService,
  private route: ActivatedRoute,
  private fb: FormBuilder) {
  this.form = this.fb.group({ companyId: [null, [Validators.required]] });
}

ngOnInit() {
  this.route.params.subscribe((params) => {
    this.id = Number(params.id)
    this.dataService.getRecord(this.id).subscribe(result => {
        this.record = result;
        this.form.patchValue(this.record);
      });
  this.dataService.getCompanies().subscribe(result => this.companies = result);
}

person-edit.component.html包含：

<select select-ddl id="companyIdInput" formControlName="companyId" [items]="companies"></select>

select-ddl.component.html包含：

@Component({
  selector: "select[select-ddl]",
  template: `<option *ngFor="let item of items" value="{{item.id}}">{{item.name}}</option>`,
})
export class SelectDdlComponent implements OnChanges {
  @Input() items: NameViewModel[] | undefined;
}

我注意到的一件事是，公司列表在记录之后加载。因此，已在窗体上调用patchValue之后创建选项。当这只是person-edit.component中的常规选择时，这不是问题，但是现在我使用的是新的select-ddl，它已经坏了。另外，如果我强迫公司在记录之前加载，问题就会消失。

设置了this.companies后，我尝试在this.form.get("companyId")!.setValue(this.record.companyId)语句中调用getCompanies().subscribe。它没有帮助。但是，那时还没有异步创建option元素，所以我希望如此。

我可以通过将this.record.companyId作为输入传递给select-ddl并将其放在选项元素[attr.selected]="item.id === itemId ? '' : null"上来解决此问题。但这是一个hack，我希望它可以使用内置的内部工具正常工作。

更新：我可以合理地确定问题与NgSelectOption指令有关，该指令似乎将选项绑定到select上，以完全满足此需求。但是，我不知道（a）如何诊断为什么在这种情况下不起作用，或者（b）如何使其按设计的方式工作。

Angular 6反应形式选择组件未从patchValue

0 个答案: