Angular 将formControl移动到父组件

我正在为子组件中的每个输入定义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);
  }


}

---

创建顶级表单，然后将子组件包装到表单中

app.component.html

base.component.ts

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

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

---

示例：

您可以在父组件中创建formControl，并通过输入将其传递给子组件？

 this.createFormGroup= new FormGroup({})

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

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

<div>
     ID:
        <input formControlName="ID">
</div>  
</div>