Angular 表单自定义组件

我有一段代码，想把它变成一个组件

<div class="form-group">
  <label class="form-control-label" for="email"> EMAIL: <span class="star">*</span></label>
  <input class="form-control" type="email" id="email" formControlName="email"/>
  <app-show-errors [control]="cliente.controls.email"></app-show-errors>
</div>

---

即使更正了变量的名称，我也无法访问它，我还需要访问formControlName

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

@Component({
    selector: 'app-input-text',
    template: `
        <div class="form-group">
            <label class="form-control-label" for="{{name}}"> NOME: <span
                    class="star" *ngIf="control.errors?.required">*</span></label>
            <input type="text" class="form-control" formControlName="{{control}}" id="{{name}}" />
            <app-show-errors [control]="cliente.controls.email"></app-show-errors>
        </div>
    `
})
export class InputTextComponent {
    @Input() private nome: string;
    @Input() private control: AbstractControlDirective | AbstractControl;
}

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

@Component({
    selector: 'app-show-errors',
    template: `
        <small *ngIf="shouldShowErrors()" class="text-danger">
            <span *ngFor="let error of listOfErrors() | slice:0:1">{{error}}</span>
        </small>
    `
})
export class ShowErrorsComponent {

    private static readonly errorMessages = {
        'required': () => 'Este campo é requerido.',
        'email': () => 'Por favor, forneça um endereço de email válido.',
        'min': (params) => 'Por favor, forneça um valor maior ou igual a ' + params.requiredMin + '.',
        'minlength': (params) => 'Por favor, forneça ao menos ' + params.requiredLength + ' caracteres. ',
        'max': (params) => 'Por favor, forneça um valor menor ou igual a ' + params.requiredMax + '.',
        'maxlength': (params) => 'Por favor, forneça não mais que ' + params.requiredLength + ' caracteres.',
        'pattern': (params) => 'O formato fornecido é inválido. ' + params.requiredPattern
    };

    @Input() private control: AbstractControlDirective | AbstractControl;

    shouldShowErrors(): boolean {
        return this.control &&
            this.control.errors &&
            (this.control.dirty || this.control.touched);
    }

    listOfErrors(): string[] {
        return Object.keys(this.control.errors)
            .map(field => this.getMessage(field, this.control.errors[field]));
    }

    private getMessage(type: string, params: any) {
        return ShowErrorsComponent.errorMessages[type](params);
    }

}

this.cliente = this.fb.group({
  fisica: this.fb.group({
                nome: [null, [Validators.required, Validators.maxLength(50)]],
  })
 });

<label class="form-control-label" for="{{name}}"> NOME: <span

@Input() private nome: string;