Na verdade, há duas coisas a serem implementadas:
- Um componente que fornece a lógica do seu componente de formulário. Não é uma entrada, pois será fornecida por
ngModelsi mesma
- Um costume
ControlValueAccessorque irá implementar a ponte entre este componente e ngModel/ngControl
Vamos dar uma amostra. Quero implementar um componente que gerencia uma lista de tags para uma empresa. O componente permitirá adicionar e remover tags. Quero adicionar uma validação para garantir que a lista de tags não está vazia. Vou defini-lo em meu componente conforme descrito abaixo:
(...)
import {TagsComponent} from './app.tags.ngform';
import {TagsValueAccessor} from './app.tags.ngform.accessor';
function notEmpty(control) {
if(control.value == null || control.value.length===0) {
return {
notEmpty: true
}
}
return null;
}
@Component({
selector: 'company-details',
directives: [ FormFieldComponent, TagsComponent, TagsValueAccessor ],
template: `
<form [ngFormModel]="companyForm">
Name: <input [(ngModel)]="company.name"
[ngFormControl]="companyForm.controls.name"/>
Tags: <tags [(ngModel)]="company.tags"
[ngFormControl]="companyForm.controls.tags"></tags>
</form>
`
})
export class DetailsComponent implements OnInit {
constructor(_builder:FormBuilder) {
this.company = new Company('companyid',
'some name', [ 'tag1', 'tag2' ]);
this.companyForm = _builder.group({
name: ['', Validators.required],
tags: ['', notEmpty]
});
}
}
O TagsComponentcomponente define a lógica para adicionar e remover elementos da tagslista.
@Component({
selector: 'tags',
template: `
<div *ngIf="tags">
<span *ngFor="#tag of tags" style="font-size:14px"
class="label label-default" (click)="removeTag(tag)">
{{label}} <span class="glyphicon glyphicon-remove"
aria- hidden="true"></span>
</span>
<span> | </span>
<span style="display:inline-block;">
<input [(ngModel)]="tagToAdd"
style="width: 50px; font-size: 14px;" class="custom"/>
<em class="glyphicon glyphicon-ok" aria-hidden="true"
(click)="addTag(tagToAdd)"></em>
</span>
</div>
`
})
export class TagsComponent {
@Output()
tagsChange: EventEmitter;
constructor() {
this.tagsChange = new EventEmitter();
}
setValue(value) {
this.tags = value;
}
removeLabel(tag:string) {
var index = this.tags.indexOf(tag, 0);
if (index != undefined) {
this.tags.splice(index, 1);
this.tagsChange.emit(this.tags);
}
}
addLabel(label:string) {
this.tags.push(this.tagToAdd);
this.tagsChange.emit(this.tags);
this.tagToAdd = '';
}
}
Como você pode ver, não há nenhuma entrada neste componente, mas uma setValue(o nome não é importante aqui). Nós o usaremos posteriormente para fornecer o valor de ngModelpara o componente. Este componente define um evento para notificar quando o estado do componente (a lista de tags) é atualizado.
Vamos implementar agora o link entre este componente e ngModel/ ngControl. Isso corresponde a uma diretiva que implementa a ControlValueAccessorinterface. Um provedor deve ser definido para este acessador de valor em relação ao NG_VALUE_ACCESSORtoken (não se esqueça de usarforwardRef pois a diretiva é definida depois).
A diretiva anexará um ouvinte de evento no tagsChangeevento do host (ou seja, o componente ao qual a diretiva está anexada, ou seja, o TagsComponent). O onChangemétodo será chamado quando o evento ocorrer. Este método corresponde ao registrado pelo Angular2. Desta forma, ele estará ciente das alterações e atualizações de acordo com o controle de formulário associado.
O writeValueé chamado quando o valor vinculado a ngFormé atualizado. Depois de injetar o componente anexado (isto é, TagsComponent), poderemos chamá-lo para passar este valor (veja o setValuemétodo anterior ).
Não se esqueça de fornecer CUSTOM_VALUE_ACCESSORnas ligações da diretiva.
Aqui está o código completo do custom ControlValueAccessor:
import {TagsComponent} from './app.tags.ngform';
const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => TagsValueAccessor), multi: true}));
@Directive({
selector: 'tags',
host: {'(tagsChange)': 'onChange($event)'},
providers: [CUSTOM_VALUE_ACCESSOR]
})
export class TagsValueAccessor implements ControlValueAccessor {
onChange = (_) => {};
onTouched = () => {};
constructor(private host: TagsComponent) { }
writeValue(value: any): void {
this.host.setValue(value);
}
registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}
Desta forma, quando eu removo todos os tagsda empresa, o validatributo do companyForm.controls.tagscontrole passa falsea ser automático.
Consulte este artigo (seção "Componente compatível com NgModel") para obter mais detalhes: