创建带有验证角度5的可重用子组件

Question

创建子组件表单并在父组件中使用，但是问题是我如何验证子组件输入字段。

错误

无法读取未定义的属性“控件”

Institute.ts

import { Component, OnInit, Input } from '@angular/core';
import { ControlContainer} from '@angular/forms'
@Component({
selector: 'app-institute',
template: `
<ng-container [formGroup]="controlContainer.control">

<div class="form-group">
<label for="name">Name:</label>
   <input id="" formControlName="name" type="text" class="form-control">
</div>

<div class="form-group">
  <label for="code">Code:</label>
  <input id="" formControlName="code" type="text" class="form-control">
</div>

<div class="form-group">
   <label for="descr">Description:</label>
   <textarea formControlName="descr" class="form-control"></textarea>
</div>

<div class="form-check form-check-inline">
    <label class="form-check-label" for="inlineCheckbox2">Status:</label>
    <input class="form-check-input" type="checkbox" 
    formControlName="status" id="inlineCheckbox2" value="option2">
</div>

</ng-container>

`})

export class InstituteComponent implements OnInit {
@Input() public groupName: string;
constructor(public controlContainer: ControlContainer) { }

ngOnInit() {
}

 }

Addinstitute.ts

import { Component, OnInit,Input  } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl, FormArray, 
FormBuilder,Validators,AbstractControl }
from '@angular/forms';


@Component({
selector: 'app-add-institute',
templateUrl: './add-institute.component.html',
styleUrls: ['./add-institute.component.css']
})

export class AddInstituteComponent implements OnInit {


constructor(
 private router: Router,
 private fb: FormBuilder) {}

 addInstitute = this.fb.group({
 general : [
      null,
        Validators.compose([
          Validators.required
        ])
    ],
 detail: this.fb.group({
  name:  [
    null,
      Validators.compose([
        Validators.required
      ])
  ],
 code: '',
 descr: '',
 status: ''
 })

 });

  ngOnInit() {}

   }

AddInstitute.html

<div class="card card-body">
   <form [formGroup]="addInstitute" (submit)="submit()">

        <div class="form-group">
          <label for="test">General:</label>
          <input id="" formControlName="test" type="text" class="form- 
          control">
         <div class="validations" 
         *ngIf="addInstitute.controls['general'].invalid 
         && addInstitute.controls['general'].touched">
          <i class="fa fa-times-circle" 
         [ngClass]="addInstitute.controls['general'].hasError('required') 
         || addInstitute.controls['general'].hasError('minlength') 
         ? ' text-danger' : 'text-success'">
         required</i>
         </div>

         </div>

         <div formGroupName="detail">

          <!-- ChildComponent Added -->                   

            <app-institute></app-institute>

           <div class="validations" 
           *ngIf="detail.controls['name'].invalid && 
            detail.controls['name'].touched">
            <i class="fa fa-times-circle" 
            [ngClass]="detail.controls['name'].hasError('required') || 
            detail.controls['name'].hasError('minlength')  ? 'text- 
            danger' : 'text-success'">
            Name required</i>
            </div>
            </div>

             <div class="form-group">
                <div class="margin-top-10">
                  <button class="btn btn-primary" type="submit" 
                  [disabled]="addInstitute.invalid">Save</button>
                <a class="btn btn-danger" routerLink="/book">Cancel</a>
             </div>
           </div>
   </form>
</div>

我不知道如何为子组件添加验证以及为子组件使用哪个formGroup。