将formControl移动到父组件

Question

我正在为子组件中的每个输入定义formControl，您可以在下面的代码中看到。如果我想将formControl的定义移动到父组件，该怎么办。那会是什么样子？

父组件html:

<div class="col-6">
<form (ngSubmit)="handleSubmit(form.value, form.valid)" #form="ngForm" novalidate>
<app-login-form-row
[label]="'username'"
[datatype]="'text'"
[(value)]="login.username"
(onBlur)="blurMes()"
[validationType]="'alpha'"
></app-login-form-row>
<app-login-form-row
[label]="'password'"
[datatype]="'text'"
[(value)]="login.password"
[validationType]="'[0-9]*'"
></app-login-form-row>
<button (click)="showValue()">submit</button>
</form>
</div>

子组件ts

export class LoginFormRowComponent implements OnInit {
login: Object = {
username: '',
password: '',
};
@Input() value: string;
@Input() label: string;
@Input() datatype: string;
@Input() validationType: string;
@Output() valueChange: EventEmitter<String> = new EventEmitter<String>();
@Output() onBlur: EventEmitter<string> = new EventEmitter<string>();
public formControl: FormControl;
constructor() { }
ngOnInit() {
let asd = '';
if (this.validationType === 'alpha') {
asd = '[0-9]*';
}
this.formControl = new FormControl('', Validators.pattern(asd));
}
onInputBlur(event) {
this.onBlur.emit(event.target.value);
}

}

Answer 1

创建顶级表单，然后将子组件封装在表单中

app.component.html

<form [formGroup]="createFormGroup">
<app-base></app-base>
</form>

应用程序组件.ts

this.createFormGroup= new FormGroup({})

基本组件.ts

在子组件内部，使用viewProviders获取父窗体实例，以便向现有窗体添加更多窗体控件

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ControlContainer, FormGroupDirective, Validators, FormBuilder, NgModel } from '@angular/forms';
@Component({
selector: 'app-base',
templateUrl: './base.component.html',
styleUrls: ['./base.component.css'],
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class BaseComponent implements OnInit {
personalData;
constructor(private parentForm: FormGroupDirective) { }
ngOnInit() {
this.personalData = this.parentForm.form;
this.personalData.addControl('personalData', new FormGroup({
Name: new FormControl('', Validators.required),
Code: new FormControl('', Validators.required),
ID: new FormControl('', Validators.required)
}));
}
}

base.component.html

<div formGroupName="personalData">
<div>
Name:
<input formControlName="Name">
</div>
<div>
Code:
<input formControlName="Code">
</div>
<div>
ID:
<input formControlName="ID">
</div>  
</div>

示例：https://stackblitz.com/edit/angular-project-form-hnkred