Angular2 - 양식 오작동 내 사용자 지정 지시문

Question

각도 모양 일 때 <input ...> 태그가있는 템플릿의 맞춤 지시문에 문제가 있습니다.

입력 내용을 양식에 선언하면 입력 필드를 편집하면 pristine, touch, valid 등의 양식 속성이 예상대로 변경됩니다. 폼 내부에 정의 지시어를 선언하면

는 <ac2-string-input ...></ac2-string-input> 말하고는 템플릿이 입력의 필드를 편집이라면, 그것은 폼의 속성을 변경하지 것, 입력을 포함합니다.

왜 그럴까요? 그게 버그 야? 이 문제를 해결할 수있는 방법이 있습니까? 아래에서

는 예를 들어 있습니다 :/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) } 
} 

서식/양식/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 문자열 입력 D irective는 응용 프로그램/양식/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(){} 
} 

서식/양식에 정의되어 우리가 양식을로드하면/input.html

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

,이있을 것 두 개의 텍스트 필드 및 양식

"깨끗한"입니다 "attr2"필드를 편집하면 필드가 양식에 바인딩되지 않은 것처럼 계속 양식이 깨끗합니다. 우리는 "ATTR1"필드를 편집하는 경우 예상대로

는, 양식, 깨끗한되지 않습니다.

Answer 1

Angular 2의 github에서 issue을 열었습니다.

구성 요소를 양식 컨트롤로 인식하려면 인터페이스를 구현하고 최상위 수준에 ngModel을 넣어야합니다.

THIS Plunkr이이를 수행하는 방법을 보여줍니다.

크레딧은 kara에게 가서이 문제를 해결했습니다.

Answer 2

ac2-string-input은 표준 HTML 입력이 아니기 때문에 input은 아마도 양식의 일부로 인식되지 않습니다.

양식의 컨트롤이나 값을 출력하고 attr2 속성을 찾고 확인할 수 있습니다. 거기에 없으면 Angular도 알지 못하므로 입력을 변경해도 양식의 pristine 상태에 영향을주지 않습니다.

통합을 쉽게하려면 구성 요소 대신 특성 지시문을 사용하는 것이 좋습니다.

<ac2-string-input [obj]="item"></ac2-string-input> 

<input type="text" [ac2StringInput]="item"/> 

및 지침은 무언가 같이 될 것이다 :이 변경됩니다 당신이 원하는 경우에도 지시어에 입력으로 전체 form를 전달할 수

@Directive({ 
    selector: '[ac2StringInput]', 
    host: { 
     // onKeyup gets executed whenever the input receives input 
     '(keyup)':'onKeyup($event)' 
    } 
}) 
export class InputComponent { 
    constructor() {} 

    /** 
    * ac2StringInput to the outside refers to obj within this directive 
    */ 
    @Input('ac2StringInput') obj:Object; 

    /**Handle keyup*/ 
    onKeyup($event){} 
} 

그것의 외부에서 벌어지고있는 일에 대한 가시성이 더 커졌습니다.