Angular 嵌套一个自定义组件，该组件包含反应式表单中的mat autocomplete

当一个嵌套组件只有一个mat autocomplete时，我很难弄清楚如何向父窗体组添加一个嵌套组件。我尝试了地址子表单使用的相同方法，效果很好，但是对于用户搜索，我需要传入整个用户，因为这是autocomplete所期望的，也是绑定到的-因此这变得非常糟糕：

我必须使用userFormGroup:{user:client？.Agent |} 在下面的writeValue中，我有一些丑陋的逻辑，其中有时值是我的实际对象，但有时当更新来自父窗体时，我必须使用val.user绑定到formgroup。 以下是涉及的部分文件：

client-information.component.ts声明一个formgroup

    this.clientFormGroup = this.formBuilder.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      address: [],
      userFormGroup: [],
    });

this.clientFormGroup.setValue({
      firstName: client?.Contact?.FirstName || '',
      lastName: client?.Contact?.LastName || '',
      address: client?.Contact?.Address || '',
      userFormGroup: { user: client?.User || '' },
    });

接下来是client-information.component.html

user-search.component.ts

user-search.component.html

感谢您的帮助，

---

谢谢

通过属性绑定传递父formGroup引用

 <app-user-search [parentForm]="clientFormGroup"></app-user-search>

---

在user-search.component.ts中，使用@Input decorator获取该对象，并根据需要对其进行修改。这样只创建了一个对象。

谢谢，但我不希望这样做。

<ng-container [formGroup]="userFormGroup">
  <mat-form-field fxFlex>
    <mat-label>Agent</mat-label>
    <input type="text" formControlName="user" matInput placeholder="Search Agent" [matAutocomplete]="userSearch">
    <mat-autocomplete autoActiveFirstOption [displayWith]="displayUserFn" #userSearch="matAutocomplete">
      <mat-option *ngFor="let user of users$ | async" [value]="user">
        {{ user.Contact.FirstName }} {{ user.Contact.LastName }}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</ng-container>

export class UserSearchComponent
  implements OnInit, ControlValueAccessor, Validator {
  userFormGroup: FormGroup;

  users$: Observable<User[]>;

  constructor(
    private formBuilder: FormBuilder,
    private userService: UserService
  ) {}

  ngOnInit(): void {
    this.createUserFormGroup();
  }

  private createUserFormGroup() {
    this.userFormGroup = this.formBuilder.group({
      user: ['', [Validators.required], [this.validateUser()]],
    });
  }

  private resetUserFormGroup(user: User, emitEvent = true) {
    this.userFormGroup.setValue(
      {
        user,
      },
      { emitEvent }
    );
  }
..............
writeValue(val: any): void {
     if (val && val.user) {
      this.resetUserFormGroup(val.user, false);
    } else if (val) {
      this.resetUserFormGroup(val, false);
    } else {
      this.userFormGroup.reset();
    }
  }

 <app-user-search [parentForm]="clientFormGroup"></app-user-search>