Angular 角度6反应形式选择组件，不从patchValue中选择选项

我正在将一个select元素包装为一个组件（称为

selectddl

），并提供额外的功能。在我发现调用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);
}

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

@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;
}

person-edit.component.html包含：

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);
}

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

@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;
}

select-ddl.component.html包含：

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);
}

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

@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;
}

@组件({
选择器：“选择[选择ddl]”，
模板：`{item.name}}`，
})
导出类SelectDdlComponent实现OnChanges{
@Input（）项：NameViewModel[]|未定义；
}

我注意到的一件事是，公司在记录之后列出了负载。因此，这些选项是在表单上已调用patchValue之后创建的。当它只是person-edit.component中的一个普通选择时，这不是问题，但现在我正在使用新的

select ddl

，它被破坏了。此外，如果我强制公司在记录之前加载，问题就会消失

我试着调用

this.form.get（“companyId”）！。setValue（this.record.companyId）

在

getcompanys（）.subscribe

语句中，在设置this.companys之后。这没用。然而，在那个时候，option元素还没有异步创建，所以我希望是这样

我可以通过将

this.record.companyId

作为输入传递给select ddl来解决这个问题，然后将其放在选项元素上：

[attr.selected]=“item.id==itemId？”：null“

。但这是一个黑客，我希望它能够正确地工作，使用内置的，引擎盖下的工具

---

更新：我确信问题与指令有关，该指令似乎将选项绑定到select以准确解决此需求。但是，我不知道（a）如何诊断为什么它在这种情况下不工作，或者（b）如何让它按照设计的方式工作。

嗨，我也遇到了同样的问题！你解决了吗？@NadG对不起。。。现在重读这篇文章，感觉是很久以前的事了，我几乎不记得自己在做什么。我相信我放弃了在任何输入上设置属性选择器的尝试；这需要一点重组，但我对结果感到高兴。如果你找到了一个适合你的方法，请一定把它作为答案贴出来，我会把它标记为已回答。对不起，我帮不了你了。