带有验证和子组件的ngForm在angular 6中

我有一张表格

    <form #basic="ngForm">
  <div>
    <label>Firstname:</label>
    <input type="text" name="firstName" ngModel required>
  </div>
  <div>
    <label>Lastname:</label>
    <input type="text" name="lastName" ngModel>
  </div>
  <address ></address>
</form>

名字：
姓氏：

在这种形式中，有一个子组件

，我希望对父组件和子组件都进行验证。我想用ngForm来做，我知道如何用formgroups来做，通过将form变量传递到子组件中，但我也尝试过，但它给了我一个错误

子组件

import { Component, Input } from '@angular/core';


@Component({
  selector: 'address',
  template: `

      <div>
        <label>Zip:</label>
        <input [ngClass]="{error: (basic.submitted)}" type="text" name="zip" ngModel>
      </div>
      <div>
        <label>Street:</label>
        <input type="text" name="street" ngModel required>
      </div>
      <div>
        <label>City:</label>
        <input type="text" name="city" ngModel>
      </div>

  `,

})
export class AddressComponent  {

}

import { Component, Input } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Component({
  selector: 'address',
  template: `

      <div>
        <label>Zip:</label>
        <input [ngClass]="{error: (basic.submitted)}" type="text" name="zip" ngModel>
      </div>
      <div>
        <label>Street:</label>
        <input type="text" name="street" ngModel required>
      </div>
      <div>
        <label>City:</label>
        <input type="text" name="city" ngModel>
      </div>

  `,
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class AddressComponent  {
  @Input() basic;
}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：'地址'，
模板：`
邮编：
街道：
城市：
`,
})
导出类地址组件{
}

您需要像这样将表单变量传递到子组件中

<form #basic="ngForm">
  <div>
    <label>Firstname:</label>
    <input type="text" name="firstName" ngModel required>
  </div>
  <div>
    <label>Lastname:</label>
    <input type="text" name="lastName" ngModel>
  </div>
  <address [basic]="basic"></address>
</form>

名字：
姓氏：