góc 2 - nhóm dạng thành phần

Question

Tôi đang cố gắng để xây dựng một hình thức hướng dữ liệu, với đóng góp đến từ thành phần khác, như thế này:

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> 
    <app-form-group [name]="name"></app-form-group> 
    <app-form-group [name]="email"></app-form-group> 
    <app-form-group [name]="other"></app-form-group> 
</form> 

Thành phần app-form-group sẽ giống như thế này:

<div class="form-group"> 
    <label class="col-md-2 control-label">{{Name}}</label> 
    <div class="col-md-9"> 
    <input class="form-control" [name]="name" [formControlName]="formCtrlName"> 
</div> 

vấn đề là formControlName cần một chỉ thị formGroup, do đó tôi nhận được lỗi này:

Error : Error in ./FormGroupComponent class FormGroupComponent - inline template:3:58 caused by: formControlName must be used with a parent formGroup directive.You'll want to add a formGroup 
    directive and pass it an existing FormGroup instance (you can create one in your class). 

Có cách nào để giải quyết vấn đề này không?

Answer 1

Bạn nên sử dụng FormGroup bạn [formGroup]="signupForm" trong app-form-group Component.You có thể sử dụng Bộ luật này:

<div class="form-group" [formGroup]="signupForm"> 
    <label class="col-md-2 control-label">{{Name}}</label> 
    <div class="col-md-9"> 
    <input class="form-control" [name]="name" [formControlName]="formCtrlName"> 
</div> 

Answer 2

Bạn có thể sử dụng một tài sản @Input để có được những tài liệu tham khảo vào tiểu hợp phần:

cấp ứng dụng form-group.ts:

@Input('group') 
public signupForm: FormGroup; 

app.html:

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()"> 
    <app-form-group [name]="name" [group]="signupForm"></app-form-group> 
    <app-form-group [name]="name" [group]="signupForm"></app-form-group> 
    <app-form-group [name]="name" [group]="signupForm"></app-form-group> 
</form> 

app-form-group.html:

<div class="form-group" [formGroup]="signupForm"> 
    <label class="col-md-2 control-label">{{Name}}</label> 
    <div class="col-md-9"> 
    <input class="form-control" [name]="name" [formControlName]="formCtrlName"> 
</div> 

Để biết thông tin chi tiết có một cái nhìn tại hướng dẫn này: https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2

Answer 3

Khi bạn muốn thực hiện một thành phần tùy chỉnh cho dữ liệu liên kết với một giá trị cá nhân Cách góc chính xác để thực hiện điều đó là đi theo phương pháp mà chế độ xem gốc chỉ định [formControl] hoặc [formControlName].

<app-form-group formControlName="name"></app-form-group> 
<app-form-group formControlName="email"></app-form-group> 
<app-form-group formControlName="other"></app-form-group> 

Trong kiểm soát trẻ em của bạn, bạn cần phải làm như sau:

Đầu tiên thêm nhà cung cấp sau đây để khai @Component bạn, do đó góc biết thành phần của bạn có thể làm việc với [formControlName]/[formControl]

providers: [ 
    { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => CountrySelectorComponent), 
    multi: true 
    } 
] 

Lớp của thành phần con bạn cần triển khai giao diện ControlValueAccessor. nên là một ví dụ hoàn toàn hoạt động, nếu không thì hãy cho tôi biết và tôi sẽ thay đổi mã, tôi đã nhập trực tiếp vào trình duyệt.

@Component({ 
    // Ensure [formControl] or [formControlName] is also specified 
    selector: '[formControl] app-form-group, [formControlName] app-form-group', 
    templateUrl: './country-selector.component.html', 
    styleUrls: ['./country-selector.component.scss'], 
    providers: [ 
    { 
     // Provide the value accessor 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => CountrySelectorComponent), 
     multi: true 
    } 
    ] 
}) 
export class CountrySelectorComponent implements ControlValueAccessor { 
    private value: any; 
    private hasHadFocus = false; 
    private hasNotifiedTouched = false; 
    private propagateChange: any =() => {}; 
    private propogateTouched: any =() => {}; 

    public changed(event: any) { 
    this.value = event.srcElement.value; 
    this.propagateChange(this.value); 
    } 

    /** 
    * Called when (focus) is triggered 
    */ 
    public focused() { 
    this.hasHadFocus = true; 
    } 

    /** 
    * Called when (blur) is triggered 
    */ 
    public blurred() { 
    if (this.hasHadFocus && !this.hasNotifiedTouched) { 
     // Only notify once, and only if lost focus after a focus 
     this.hasNotifiedTouched = true; 
     this.propogateTouched(); 
    } 
    } 

    /** 
    * Called when a new value is set via code 
    * @param obj 
    */ 
    writeValue(obj: any): void { 
    this.value = obj; 
    } 

    /** 
    * Register a call back to call when our value changes 
    * @param fn 
    */ 
    registerOnChange(fn: any): void { 
    this.propagateChange = fn; 
    } 

    /** 
    * Register a call back to call when our value is first touched 
    * @param fn 
    */ 
    registerOnTouched(fn: any): void { 
    this.propogateTouched = fn; 
    } 
} 

mẫu app-form-group của bạn sẽ giống như thế này

<div class="form-group"> 
    <label class="col-md-2 control-label">{{Name}}</label> 
    <div class="col-md-9"> 
    <input class="form-control" (blur)="blurred()" focus="focussed()" change="changed($event)"> 
</div> 

1. Thêm [formGroup]="signupForm" cho mỗi app-form-group trường hợp của bạn trong giao diện chính của bạn
2. Thực hiện OnInit trong kiểm soát app-form-group của bạn.
3. Thêm private controlContainer: ControlContainer để các nhà xây dựng của thành phần app-form-group của bạn để góc sẽ bơm nó
4. Thêm public form: FormGroup; tài sản để thành phần app-form-group của bạn.

5. Trong ngOnInit hãy thêm mã sau đây

   this.form = this.containerControl.control;

Trong mẫu app-form-group của bạn, bạn sẽ thêm [formGroup] như vậy

Đây là phương pháp đòi hỏi phải có số tiền ít nhất của mã số, và là một trong tôi muốn giới thiệu khi bạn muốn nhúng điều khiển tổng hợp chỉnh sửa nhiều phần dữ liệu (như Địa chỉ).

Từ blog này ->https://mrpmorris.blogspot.co.uk/2017/08/angular-composite-controls-formgroup-formgroupname-reactiveforms.html