ng-form / nested forms en Angular moderno

Los ng-form anidados pasan a ser FormGroups anidados. Un ng-form repetido pasa a ser un FormArray de grupos, definido en el componente.

Antes · AngularJS

<form name="orderForm" ng-submit="vm.save()">
  <input name="customer" ng-model="vm.order.customer" required>
  <ng-form name="lineForm" ng-repeat="line in vm.order.lines">
    <input name="sku" ng-model="line.sku" required>
    <input name="qty" type="number" ng-model="line.qty" min="1">
    <span ng-show="lineForm.qty.$invalid">Invalid quantity</span>
  </ng-form>
</form>

Después · Angular

newLine = () => this.fb.group({ sku: ['', Validators.required], qty: [1, Validators.min(1)] });
form = this.fb.group({
  customer: ['', Validators.required],
  lines: this.fb.array([this.newLine()]),
});

<form [formGroup]="form" (ngSubmit)="save()">
  <input formControlName="customer" />
  @for (line of form.controls.lines.controls; track line) {
    <div [formGroup]="line">
      <input formControlName="sku" />
      <input formControlName="qty" type="number" />
    </div>
  }
</form>

Qué cambia

ng-form dentro de ng-repeat pasa a ser un FormArray; cada fila es un FormGroup enlazado con [formGroup].
La validez se sigue propagando hacia arriba: una fila inválida invalida todo el formulario.
Las filas se agregan y quitan con push() y removeAt() sobre el FormArray, y form.getRawValue() devuelve un objeto tipado.

Consejo de migración. Las reglas que abarcan varias filas, como no repetir SKU, pasan a ser un validador sobre el FormArray. En AngularJS esos chequeos solían vivir en código del controlador que corría al enviar.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn