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 .