angular - Angular2 - フォーム内のカスタム ディレクティブの誤動作

Question

<input ...>カスタム ディレクティブが角度のあるフォーム内にある場合、テンプレートにタグを含むカスタム ディレクティブに問題があります。

フォーム内で入力を宣言する場合、入力のフィールドを編集すると、フォームのプロパティ (pristine、touched、valid など) が期待どおりに変更されます。

たとえば、フォーム内でカスタム ディレクティブを宣言し、その<ac2-string-input ...></ac2-string-input>テンプレートに入力が含まれている場合、この入力のフィールドを編集しても、フォームのプロパティは変更されません。

何故ですか？それはバグですか？これに対する回避策はありますか?

以下に例を示します。

app/form.component.tsにフォーム コンポーネントを含めることができます。

import { Component } from '@angular/core'

import { InputComponent } from './input.component'

@Component({
    selector: 'ac2-form',
    templateUrl: '<build path>/templates/form/form.html',
    directives: [InputComponent]
})

export class FormComponent {


    item: Object = {
       attr1: 'blah',
       attr2: 'another blah'
    }

    constructor(){}

    submit(){ console.log(this.item) }
}

テンプレート付きtemplates/form/form.html

<form #f="ngForm" (ngSubmit)="submit()">
  <input type="text" name="attr1" [(ngModel)]="item.attr1"/>
  <ac2-string-input [obj]="item"></ac2-string-input>

  <button type="submit">Submit</button>
</form>

<div>
    Pristine? {{f.form.pristine}}
</div>

また、ac2-string-inputディレクティブはapp/form/input.component.tsで定義されています。

import { Component, Input } from '@angular/core'

@Component({
    selector: 'ac2-string-input',
    templateUrl: '<build path>/templates/form/input.html'
})

export class InputComponent {
    @Input() obj: Object;

    constructor(){}
}

テンプレート付きtemplates/form/input.html

<input type="text" name="attr2" [(ngModel)]="obj.attr2"/>

フォームをロードすると、2 つのテキスト フィールドがあり、フォームは「元の状態」になります。

「attr2」フィールドを編集すると、フィールドがフォームにバインドされていないかのように、フォームは元のままになります。

「attr1」フィールドを編集すると、期待どおりにフォームがきれいになりません。