4

InputCustomカスタムコンポーネントを作成し、それを使用してモデル駆動型フォームを作成したいと考えています。

私のカスタム コンポーネントは、入力フィールドをラップしBootstrap material design、look'n'feel に使用するだけです。

@Component({
 selector:'inputCustom',
 template:`
    <div class="form-group label-floating is-empty">
        <label class="control-label" for="input">Type here</label>
        <input class="form-control" id="input" type="text">
        <p class="help-block">Some help text</p>
        <span class="material-input"></span>
    </div>
`})
class InputCustom{....}

Angular2でモデル駆動型フォームを作成する場合

<form [ngFormModel]="formRef">
    <input type ="email" ngControl="email">
</form>

Controlsフォーム要素に存在するすべてが に登録されControlGroupます。formRefを使用すると、コントローラー内のフィールド値を追跡できます。

@Component({...})
class FormController{
    formRef: ControlGroup;
    constructor(...){
        this.form.valueChanges.subscribe(data => console.log('changes',  data));
    }
}

今、私は人々に私のコンポーネントをこのように使ってもらいたい

<form [ngFormModel]="formRef">
    <inputCustom type ="email" ngControl="email">
</form>

Q1: 独自のカスタムngControlディレクティブを作成する必要がありますか?

Q2:でラップされngControlた内部要素に伝播する方法は?<input><inputCustom>

ControlQ3:周囲のフォームに登録するにはどうすればよいControlGroupですか?

4

3 に答える 3