角2錯誤：無法找到未指定名稱屬性控制 - 內部部件

Question

組件我要創建一個表單，我想有關組件

更加清晰

形式的主要思想是：

FormComponent | > FieldComponent |>表格InputComponent

，所以我有PartnerFormComponent：

HTML：

<form [formGroup]="partnerForm" (ngSubmit)="save()"> 
    <!--<legal-information 
     [(partner)]="partner" [(partnerConfiguration)]="partnerConfiguration" ></legal-information>--> 
    <combo-billing-entity [(formGroup)]="partnerForm"  [(partner)]="partner" [(partnerConfiguration)]="partnerConfiguration"></combo-billing-entity> 

    <div class="buttons_form"> 
     <button class="save_button_form" type="submit" [disabled]="!partnerForm.valid"> 
     Add 
     </button> 

     <a class="btn-floating btn-large waves-effect waves-light green" 
     routerLink="/partners"> 
     <i class="material-icons">Cancel</i> 
     </a> 
    </div> 
    </form> 

和TS：

@Component({ 
    selector: 'partner-form', 
    templateUrl: './partner-form.component.html', 
    styleUrls: ['./partner-form.component.css'], 
    entryComponents:[LegalInformationComponent] 
}) 
export class PartnerFormComponent implements OnInit { 


    private partnerForm: FormGroup; 
    title: string; 
    partner: Partner = new Partner(); 
    partnerConfiguration: PartnerConfiguration = new PartnerConfiguration(); 

    constructor(
    private router: Router, 
    private route: ActivatedRoute, 
    private partnerService: PartnerService 
) { } 



    ngOnInit() { 
    var id = this.route.params.subscribe(params => { 
     var id = params['id']; 

     if (!id) 
     return; 

     ..... 

    }); 
    } 

從組件

然後我有HTML組合：

<div class="components_situation"> 
    <div class="field_form_title"> 
     {{title}} <span class="is_required_form" [hidden]="!isRequired">*</span> 
    </div> 
    <div [formGroup]="formGroup" > 
    <select id="billingEntity" [(ngModel)]="partnerConfiguration.fakeBillingEntity" 
      formControlName="billingEntity" 
      [class.invalid]="form.controls['billingEntity'].touched && !form.controls['billingEntity'].valid" 
    > 
     <option disabled hidden [value]="selectUndefinedOptionValue">-- select --</option> 
     <option *ngFor="let obj of billingEntities" [value]="obj.value" >{{obj.name}}</option> 
    </select> 
    </div> 
    <div class="some_explanation_form_field">{{someExplanation}}</div> 
    </div> 

個

和TS：

import {Component, Input, OnInit} from "@angular/core"; 
import {CommonFieldFormComponent} from "../../common-field-form-component"; 
import {BillingService} from "../../../../../../services/billing/billing.service"; 
import {BillingEntitity} from "../../../../../../model/billing_entity"; 
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; 

@Component({ 
    selector: 'combo-billing-entity', 
    templateUrl: './combo-billing-entity.component.html' 
}) 
export class ComboBillingEntityComponent extends CommonFieldFormComponent implements OnInit { 
    private selectUndefinedOptionValue:any; 
    billingEntities:BillingEntitity[] = []; 

    @Input() 
    private formGroup:FormGroup; 


    constructor(private billingService: BillingService, private formBuilder:FormBuilder) 
{ 
    super(); 
    this.isRequired=true; 
    this.title="Billing Entity"; 
    this.someExplanation="Identifies entity responsible for billing invoice"; 
    this.formGroup = this.formBuilder.group({ 
     billingEntity :['', Validators.required] 
    }); 
    } 

但畢竟我有這樣的錯誤：

ComboBillingEntityComponent.html：5 ERROR錯誤：無法找到_throwError（forms.es5.js與未指定的name屬性 控制：1852 ） at FormUpControl（forms.es5.js：1760） at FormGroupDirective.webpackJsonp .../../../forms/@angular/forms.es5.js.FormGroupDirective.addControl（forms.es5.js：4733） ）在FormControlName上的FormControlName.webpackJsonp處的 .../../../forms/@angular/forms.es5.js.FormControlName._setUpControl（forms.es5.js：5321） olName.webpackJsonp .../../../forms/@angular/forms.es5.js.FormControlName.ngOnChanges（forms.es5.js：5239） at checkAndUpdateDirectiveInline（core.es5.js：10831） at checkAndUpdateNodeInline（core.es5.js：12330） 在checkAndUpdateNode（core.es5.js：12269） 在debugCheckAndUpdateNode（core.es5.js：13130） 在debugCheckDirectivesFn（core.es5.js：13071）

任何想法如何將輸入綁定到主窗體..我在做什麼錯了？

Answer 1

您的組件將不得不實施ControlValueAccessor並註冊它是一個多依賴項。 Pascal Precht在custom form controls in Angular上發表了一篇非常好的博客文章。

總而言之一句話，您可以通過定義功能writeValue，registerOnChange和registerOnTouched實施ControlValueAccessor之後，你就必須提供現有的值，以便可以折角知道你想使用它的形式控制。

@Component({ 
    // ... 
    providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => ComboBillingEntityComponent), 
     multi: true, 
    } 
    ], 
    // ... 
}) 
class ComboBillingEntityComponent implements ControlValueAccessor { 
    // ... 
} 

在此之後，你可以在<combo-billing-entity>標籤在你的模板中使用formControlName：

<combo-billing-entity formControlName="billingInfo"></combo-billing-entity> 

Answer 2

您的形式相當多的問題。您正嘗試在輸入字段中使用雙向綁定，例如[(formGroup)]="partnerForm"但是，您無法使用@Output實際觸發雙向綁定，因此您沒有正確使用它。

表單對象確實是一個對象，而對象在JS中是可變的並且通過引用傳遞。有時候這不是我們期望的行爲，但是在這種情況下，我們需要那個嵌套組件的地方。因此，無論您如何在子組件中形成字段，父母都會意識到，所以您實際上不需要雙向綁定。

其次，請避免使用反應形式的[(ngModel)]。我注意到奇怪的行爲可能會發生，這是可以理解的，因爲我們有兩個綁定，ngModel變量，另一個是窗體控制變量。改爲使用表單控件，並從模板中刪除所有ngModel。您可以將值設置爲表單控件，基本上它可以作爲雙向綁定，因爲您可以隨時訪問TS中的表單控件值。因此，[(ngModel)]

在父窗體中構建您的整個窗體，然後將窗體組傳遞給子窗體，或者將嵌套窗體組傳遞給您的子窗體。所以，在這裏你的父母，你真的想建立形式：

this.partnerForm = this.fb.group({ 
    billingEntity: ['hey I am initial value'] 
}) 

你上面罐初始值設定爲billingEntity，或者如果你需要一些其他的點手動設置的默認值，你可以做到這一點：this.partnerForm.get('billingEntity').setValue(...)

我們現在把這個形式向孩子：

<combo-billing-entity [partnerForm]="partnerForm"></combo-billing-entity> 

和孩子，我們把它註冊爲一個Input：

@Input() formGroup: FormGroup; 

然後我們就可以只使用它，e.g：

<div [formGroup]="partnerForm"> 
    <input formControlName="billingEntity" /> 
</div> 

我看到你試圖使用[(ngModel)]那裏，但如前所述，你可以丟棄，並使用表單控件來代替。該值很好地存儲在formGroup.get('billingEntity').value中，正如前面提到的那樣，如果需要在某個點設置該值，則可以這樣做。但是所有的表單值都很好地存儲在表單對象中，例如partnerForm.value。

這裏有一個簡單的演示：http://plnkr.co/edit/AuidEMaaURsBPfDP8k0Q?p=preview

我建議你閱讀有關嵌套形式，這是一個相當不錯的上手：Nested Model-driven Forms