具有不同属性值的重复角度组件

Question

我有一个组件，我想在同一页面中多次使用，并且我想在每次调用时绑定不同的数据值

这是我的组件

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


@Component({
    selector: 'creat-task-validation',
    templateUrl: 'creat-task-validation.component.html'
})

export class CreatTaskValidationComponent implements OnInit {

    @Input() form : FormControl;
    @Input() prop : string;

    constructor() {}
    ngOnInit(){}
}

HTML

<div *ngIf="form.invalid && (form.dirty || form.touched)" class="alert alert-danger padding-5">

    <div *ngIf="form.errors.required">
        {{prop + 'is required .' | translate}}
    </div>
</div>

以及它在父组件中的调用方式

<creat-task-validation *ngIf="description.invalid && (description.dirty || description.touched)" [prop]="'Description'" [form]="description"></creat-task-validation>