Góc 2: Biểu mẫu có chứa thành phần con

Question

Tôi có thành phần có biểu mẫu và một số thành phần con trong biểu mẫu. Các thành phần con được tạo bằng cách sử dụng *ngFor và mỗi thành phần con chứa các phần tử input. Trình biên dịch Angular2 đưa ra các lỗi như [formGroup] không được định nghĩa.

Việc triển khai này có đúng không?

Component phụ huynh:

<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> 

Component Child: 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> 

T.B. : Tất cả hàng nhập đều tốt nên tôi khá chắc chắn rằng không có lỗi nhập nào ở đây

Answer 1

Hành vi này được mong đợi. Các dạng góc không được tự động đăng ký khi bên trong thành phần lồng nhau. Tuy nhiên bạn có thể giải quyết vấn đề này bằng cách cung cấp FormGroup bên ngoài cho thành phần con. Và bên trong thành phần con bọc mẫu bên trong cùng một nhóm. Sau đây là cách này có thể trông:

/ngoài mã thành phần - nó có chứa các hình thức/

@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') 
    }); 
} 

/code trẻ thành phần, tức là my-comp/

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

Answer 2

Bạn đang nói rằng nhập là tốt nhưng các lỗi bạn nhận được cho thấy có thể là không.

[formGroup] is not defined lỗi thường do thiếu
import { ReactiveFormsModule } from '@angular/forms' bên trong mô-đun nơi thành phần của bạn được khai báo.

Bên cạnh đó, bạn không nên sử dụng [(ngModel)] bên trong biểu mẫu định hướng mô hình mà thay vào đó, hãy dựa vào [formGroup] và formControlName.