Angular FormControlName具有多个输入的ControlValueAccessor

我想通过实现ControlValueAccessor来创建自定义表单元素地址

我试图创建一个AddressComponent，其中有多个输入字段。我想在下面这样的被动表单中使用这个组件

address.component.html

*必填字段
*必填字段
*必填字段

address.component.ts

导出类AddressComponent实现OnInit、ControlValueAccessor{
@ViewChild（'addForm'）
公共addForm:FormControlName；
@Input（）父窗体：NgForm；
公共地址形式:FormGroup ;；
私有地址：any={}；
建造师(
私人fb:FormBuilder，
) { }
恩戈尼尼特（）{
this.addressForm=this.fb.group({
地址1:[''[Validators.required]]，
地址2:['']，
地址3:['']，
国家：[''[Validators.required]]，
状态：[''[Validators.required]]，
城市：[''[Validators.required]]，
});
}
saveAddress（）{
console.log（此地址）；
log（this.addressForm.getRawValue（））；
}
传播变化=（（uu0:any）=>{}；
writeValue（对象：任何）{
控制台日志（obj）//
将此代码添加到注册表更改中：

this.addressForm.valueChanges.subscribe(() => {
  fn(this.addressForm.value);
});

将此代码添加到注册表更改中：

this.addressForm.valueChanges.subscribe(() => {
  fn(this.addressForm.value);
});

                    <!-- Organization Name -->
                    <mat-form-field class="form-field">
                        <input matInput placeholder="Organization Name" formControlName="cutomerName" required>
                        <mat-error *ngIf="custForm.get('cutomerName').hasError('required')">
                            *Required field
                        </mat-error>
                    </mat-form-field>

                    <!-- Organization Code -->
                    <mat-form-field class="form-field">
                        <input matInput placeholder="Organization Code" formControlName="cutomerCode" required>
                        <mat-hint></mat-hint>
                        <mat-error *ngIf="custForm.get('cutomerCode').hasError('required')">
                            *Required field
                        </mat-error>
                        <mat-error *ngIf="custForm.get('cutomerCode').hasError('isEmployeIdUnique')">
                            Organization Code already available in the system
                        </mat-error>
                    </mat-form-field>

                    <!-- Website -->
                    <mat-form-field class="form-field">
                        <input matInput placeholder="Website" formControlName="website">
                    </mat-form-field>

                    <!-- Telephone -->
                    <mat-form-field class="form-field">
                        <input matInput placeholder="Telephone" name="customerForm.telephone" formControlName="telephone">
                    </mat-form-field>

                    <app-address [parentForm]="primaryAddress" formControlName="primaryAddress" #primaryAddress></app-address>

                    <div class="button-group">
                        <button type="submit" [disabled]="loading" class="btn btn-submit">Submit</button>
                        <button (click)="custForm.reset()" class="btn btn-outline-submit">reset</button>
                    </div>

                </form>

    export class CustomerRegistrationComponent implements OnInit {

  @ViewChild('primaryAddress')
  private primaryAddress: AddressComponent;

  public customerForm: NgForm;
  public custForm: FormGroup;
  constructor(
    private fb: FormBuilder,
  ) { }

  ngOnInit() {
    this.custForm = this.fb.group({
      cutomerName: ['', [Validators.required]],
      cutomerCode: ['', [Validators.required]],
      website: [''],
      telephone: ['', [
        Validators.pattern(/^[0-9 ]{1,15}$/)
      ]],
      primaryAddress: new FormControl(),
    });
  }

  registerCusomer() {
    console.log(this.custForm.getRawValue());  //<---- not getting primaryAddress details
    this.primaryAddress.saveAddress();
  }
}

this.addressForm.valueChanges.subscribe(() => {
  fn(this.addressForm.value);
});