角2加控制父組件的形式

我有完整的模板自動完成：角2加控制父組件的形式

<input [(ngModel)]="model"> //todo add control

它是這樣實現的：

<div class="form-group"> 
    <label for="location">Location</label> 
    <auto-complete [(model)]="model.location"></auto-complete> 
</div>

除了它，我有如下格式等領域:(通知驗證指令）

<div class="form-group" [fieldValidity]="biography"> 
    <label for="currentPassword">Biography</label> 
    <textarea 
    [(ngModel)]="model.biography" ngControl="biography" #biography="ngForm" maxlength="300" 
    class="form-control" placeholder="About me..." rows="4"></textarea> 
    <p class="xui-meta-info"> 
     We suggest a short bio. If it's 300 characters or less it'll look great on your profile. 
    </p> 
    <field-validation-messages [field]="biography"></field-validation-messages> 
</div>

正如你所看到的，我的驗證指令依賴於th e輸入具有表單上的關聯控件。如何確保自動完成的輸入在父窗體中具有關聯的控件？（我試過編程方式創建一個新的控制（），然後調用form.addControl（），但只接受一個NgControl

來源

2016-05-23 Baconbeastnz

「創建輸入控件」是什麼意思？ –

在我的其他輸入（在父組件中）我使用「ngControl =」fullName「等我需要做類似的這個，我需要一個控制輸入存在父窗體上，以便我的驗證（在父組件）可以使用form.controls ['location']。例如錯誤 – Baconbeastnz

請提供更多的代碼來演示你試圖完成什麼，理想的是一個Plunker。 –

你需要通過實現自定義值訪問，讓您auto-complete組件符合控制。

下面是一個示例：

@Component({ 
    selector: 'auto-complete', 
    template: ` 
    <input [(ngModel)]="model" (ngModelChange)="onChange($event)> 
    `, 
    (...) 
}) 
export class AutoCompleteComponent implements AfterViewInit, ControlValueAccessor { 

    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value: any): void { 
    this.model = value; 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 
}

這樣你就可以直接添加控制你的自動完成組件是這樣的：

<auto-complete 
    [(model)]="model.location" 
    [ngFormControl]="someCtrl"> 
    <!-- or #autoComplete="ngForm" ngControl="autoComplete" --> 
</auto-complete>

有關詳細信息，請參閱本文（節「NgModel兼容設備」）：

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

這個問題也可以幫助你：

Custom checkbox input component styled with Switchery

來源

2016-05-23 07:18:35

謝謝Thierry！我得到「沒有價值訪問者的位置''。是否有一個簡單的解決方法呢？或者我需要寫一個自定義的值存取器？ – Baconbeastnz

不客氣！什麼是'location'？ –

如果我將它實現爲[ngFormControl] =「location」錯誤「找不到控制」'''。我猜這是因爲我沒有創建一個新的控制（）在我的父母？我沒有這樣做的原因是因爲我需要將控件添加到窗體進行驗證，並且我注意到form.addControl（）只接受ngControl，而不是控件，所以我不能將它添加進去。 Then If我將它實現爲「＃location =」ngForm「ngControl =」location「，我得到錯誤：」沒有任何值的存取器用於'位置'，位置不存在任何地方，我認爲它會爲我創建一個控件 – Baconbeastnz

角2加控制父組件的形式

回答

相關問題