formcontrol - formgroup angular 5 example

Angular 2: Forma que contiene componente infantil

Question

Tengo un componente que tiene un formulario y algunos componentes secundarios dentro del formulario. Los componentes secundarios se crean utilizando *ngFor y cada elemento secundario contiene elementos de input . El compilador Angular2 está dando errores como [formGroup] no está definido.

¿Es esta implementación una correcta?

Componente principal:

<section class="data-body">
        <form [formGroup]="checkoutForm" novalidate>
            <app-checkout-product-view *ngFor="let item of checkoutData.products" [_product]="item" formGroupName="products"></app-checkout-product-view>
                <div class="col-md-4">
                    <label>Nominee:</label>
                    <select required [(ngModel)]="checkoutData.selectedNominee" [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let nominee of checkoutData.nomineeList" [value]="nominee">{{nominee}}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label>Bank Account:</label>
                    <select [(ngModel)]="checkoutData.selectedBank" required [ngModelOptions]="{standalone: true}">
                        <option *ngFor="let bank of checkoutData.bankList" [value]="bank">{{bank}}</option>
                    </select>
                </div>
            </div>
        </form>
    </section>

Componente hijo: app-checkout-product-view

<div class="row">
    <div class="col-md-4">
        <md-input required [(ngModel)]="product.investmentAmount 
                  formControlName="investmentAmount">
            <span md-prefix>&#x20B9;</span><!--Rupee icon-->
        </md-input>
    </div>
</div>

PD: Todas las importaciones están bien, así que estoy bastante seguro de que aquí no hay errores de importación.

Answer 1

Se espera este comportamiento. Las formas angulares no se registran automáticamente cuando se encuentra dentro del componente anidado. Sin embargo, puede solucionar esto proporcionando el FormGroup externo al componente secundario. Y dentro del componente hijo, envuelva la plantilla dentro de ese mismo grupo. Aquí es cómo podría verse esto:

/ código del componente externo - contiene la forma /

@Component({
  selector: ''my-app'',
  template: `
    <form [formGroup]="reactiveFormGroup">
      <input formControlName="foo" />
      <my-comp **[group]="reactiveFormGroup"**></my-comp>
    </form>

    form value: {{ reactiveFormGroup.value | json }}
  `
})
export class AppComponent { 
  reactiveFormGroup = new FormGroup({
    foo: new FormControl(''default foo''),
    bar: new FormControl(''default bar'')
  });
}

/ código del componente hijo, es decir, my-comp /

@Component({
  selector: ''my-comp'',
  template: `
    <div [formGroup]="group">
      <input   [formControlName]="''bar''" />
    </div>
  `
})
export class MyComponent { 
  @Input() group: FormGroup;
}

Answer 2

Usted está diciendo que las importaciones están bien, pero los errores que está recibiendo sugieren que probablemente no lo estén.

[formGroup] is not defined errores generalmente son causados ​​por una falta
import { ReactiveFormsModule } from ''@angular/forms'' dentro del módulo donde se declara su componente.

Además, no debe usar [(ngModel)] dentro de formularios controlados por modelos, sino que debe basarse en [formGroup] y formControlName .