Question

我有一个父组件，其中包含一些自定义组件的表单。例如，其中一个自定义组件具有输入文本和选择（可以与用户添加的那对一样多次出现/重复）。在我的自定义组件中，如果填充了所有对，则检查是否已填充。如果自定义组件已填满，我想在提交表单后签入父组件。

父组件：

@Component({
    selector: 'app-parent',
    template: `
        ...
        <form [formGroup]="form" (ngSubmit)="submit(form)">
            <app-custom-component formControlName="customComponent1" [data]="dataCustomComponent1" [(ngModel)]="dataCustomComponent"></app-custom-component>
            ...
            <app-custom-component formControlName="customComponent2" [data]="dataCustomComponent2" [(ngModel)]="dataCustomComponent2"></app-custom-component>
            <button type="submit">Submit</button>
        </form>
        ...
    `
})
export class ParentComponent implements OnInit {
    form: FormGroup;
    dataCustomComponent1: PairTextSelect[];
    dataCustomComponent2: PairTextSelect[];

    constructor(private fb: FormBuilder) {}

    ...
}

自定义组件：

@Component({
    selector: 'app-custom-component',
    template: `
        <div *ngFor="let row of data; let i=index; trackBy: trackByIndex">
            <input type="text" [(ngModel)]="data[i].text" (keyup)="isFilled()" />
            <p-dropdown [options]="options" [(ngModel)]="data[i].option" (onChange)="isFilled()"></p-dropdown>
            <i *ngIf="i+1>1" class="fa fa-times" aria-hidden="true" (click)="removeOcurrence(i)"></i>
        </div>
        <div (click)="addOcurrence()">
            <i class="fa fa-plus-circle" aria-hidden="true"></i><span>Add ocurrence</span>
        </div>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => CustomComponent),
            multi: true
        }
    ]
})

export class CustomComponent implements OnInit, ControlValueAccessor {
    isFilled: boolean;
    private _data: PairTextSelect[];

    @Input() set data(data: PairTextSelect[]) {
        this._data = data;
    }

    get data(): PairTextSelect[] {
        return this._data;
    }

    isFilled(): void {
        // Checks if the custom component is filled
    }

    ...
}

型号：

export class PairTextSelect {
    text: string;
    option: string;
}

所以我想我需要从父组件中检查属性＆＃34; isFilled＆＃34;自定义组件。我怎么能这样做？

Answer 1

而不是在您的孩子中迭代“普通”数组，而是使用FormArray，因为您已经在使用Reactive Form。这样，父母也会知道孩子们发生的事情。所以我会做类似以下的事情：

父：

constructor(private fb: FormBuilder) {
  this.form = fb.group({
    // we pass a formarray to the children
    formArr1: fb.array([]),
    formArr2: fb.array([])
  })
}

我们需要将父表单的引用传递给子表单，并将formarrays的名称作为要在子表单中使用的字符串传递。所以你的孩子标签看起来像这样：

<app-custom-component [form]="form" [formArr]="form.controls.formArr1" 
   name="formArr1"></app-custom-component>

<app-custom-component [form]="form" [formArr]="form.controls.formArr2" 
   name="formArr2"></app-custom-component>

子模板看起来像这样：

<div [formGroup]="form">
  <div [formArrayName]="name">
    <div *ngFor="let a of formArr.controls; let i = index" [formGroupName]="i">
      <input formControlName="text">
      <input formControlName="option">
    </div>
  </div>
</div>

在子TS中，当我们想要添加一个新对象时，我们创建一个新的表单组：

@Input() formArr: FormArray;
@Input() form: FormGroup;
@Input() name: string;


addOccurance() {
  this.formArr.push(this.fb.group({
    text: ['', Validators.required],
    option: ['', Validators.required]
  }))
}

的 DEMO

Answer 2

您可以使用@ViewChild装饰器访问子组件。

@ViewChild(CustomComponent) customComp: CustomComponent

现在，您可以访问父组件中的子组件属性。这仅在加载子进程后，即在AfterViewInit生命周期事件之后才有效。

customComp.PairTextSelect

现在可以使用。

如何检查是否从父组件

2 个答案:

的 DEMO