In molti progetti abbiamo la necessità di creare form complesse con molti campi. I vari campi hanno spesso in comune molte necessita come quella di avere una label, un messaggio di validazione in caso questa fallisse e altro ancora. In questi casi può tornare utile creare un component che racchiuda queste funzionalità così da semplificare lo sviluppo di queste form.

Questo component accetta in input la label da mostrare, un oggetto FormControl che rappresenta il controllo da associare al campo di input e un oggetto di tipo NgForm che rappresenta la form HTML. Grazie a questi dati possiamo costruire il nostro component.

export class StringEditorComponent implements OnInit {
  @Input() label: string;
  @Input() form: NgForm;
  @Input() control: FormControl;
}

<div class="form-group" [formGroup]="control.parent" 
  [ngClass]="{'has-error': !controls.valid && control.touched && form?.submitted}">
  <label>{{label}}</label>
  <input type="text" class="form-control" [formControl]="control" />
  <app-validation-editor [form]="form" [control]="control" />
</div>

La parte più interessante del component è sicuramente il template. Il div che agisce da contenitore applica la classe has-error solo se il controllo è valido, se ha ricevuto il focus e se è stato fatto il submit della form. Il div contiene anche la label, il campo di testo messo in binding con il controllo passato in input e un altro controllo che mostra i messaggi di errore (di cui parleremo in uno script successivo.

Per utilizzare questo controllo in una pagina, dobbiamo prima creare un oggeto FormGroup con i controlli figli, e poi mettere in binding questi dati con il component.

this.form = this.fb.group({
  customerId: [customer.customerId, this.newCustomer ? [Validators.required] : []],
  companyName: [customer.companyName, Validators.compose([Validators.required, Validators.maxLength(40)
});

<form [formGroup]="form" class="form" (ngSubmit)="onSubmit()" #ngform="ngForm">
  <app-string-editor [formGroup]="form" [form]="ngform" [control]="form.get('customerId')" />
  <app-string-editor [formGroup]="form" [form]="ngform" controlName="form.get('companyName')" />
</form>