Angular 2 - formControlName внутри компонента
Я хочу создать пользовательский компонент ввода, который я могу использовать с API FormBuilder. Как мне добавитьformControlName
внутри компонента?
Шаблон:
<label class="custom-input__label"
*ngIf="label">
{{ label }}
</label>
<input class="custom-input__input"
placeholder="{{ placeholder }}"
name="title" />
<span class="custom-input__message"
*ngIf="message">
{{ message }}
</span>
Составная часть:
import {
Component,
Input,
ViewEncapsulation
} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'custom-input',
host: {
'[class.custom-input]': 'true'
},
templateUrl: 'input.component.html',
styleUrls: ['input.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class InputComponent {
@Input() label: string;
@Input() message: string;
@Input() placeholder: string;
}
Использование:
<custom-input label="Title"
formControlName="title" // Pass this to input inside the component>
</custom-input>