嵌套一个自定义组件，该组件在反应式窗体中包含 mat-自动完成功能

Question

当该组件只有一个垫子自动完成时，我在弄清楚如何将嵌套组件添加到父表单组时遇到了一些麻烦。我已经尝试了与用于地址子表单相同的方法，该方法工作正常，但是对于用户搜索，我需要传入整个用户，因为这是自动完成所期望的并绑定到的 - 所以这变得非常丑陋：

1. 我不得不使用 userFormGroup： { user： client？。代理 ||'' }
2. 在下面的writeValue中，我有一些丑陋的逻辑，有时值是我的实际对象，但其他时候当更新来自父表单时，我必须使用val.user绑定到表单组。

以下是涉及的部分文件：

client-information.component.ts声明一个表单组

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

接下来我们有客户端信息组件.html

<form [formGroup]="clientFormGroup" (ngSubmit)="save($event)" #clientForm="ngForm" novalidate>
<mat-form-field>
<mat-label>First Name</mat-label>
<input matInput type="text" formControlName="firstName" placeholder="First Name (required)">
<mat-error *ngIf="clientFormGroup.get('firstName').hasError('required')">Required</mat-error>
</mat-form-field>
<app-address formControlName="address"></app-address>
<app-user-search formControlName="userFormGroup"></app-user-search>
</form>

user-search.component.ts

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

user-search.component.html

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

任何帮助不胜感激， 谢谢！

Answer 1

通过属性绑定传递父窗体组引用。

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

在user-search.component.ts中，使用@Input((装饰器获取该对象并根据需要对其进行修改。这样，只会创建 1 个对象。