2016-06-29 2 views
1

저는 rc.1 용으로 빌드 한 앱을 가지고 있으며 현재 rc.3으로 업그레이드하고 있으며 새 양식 모듈을 가지고 있습니다. 나는 그것의 beacuse에서 나의 머리를 찢어 버리고 있었고, 누군가 내가 틀린 것을하고있는 어떤 생각을 가지고 있는지보기로 결정했다. Angular2 모델 중심 양식 및 사전 값

기본적으로이 같은 형태 (FB는 FormBuilder의 인스턴스) 짓고 있어요 :

this.form = fb.group({ 
    client_id: ['Customer', Validators.compose([Validators.required, formValidators.mustBeNumber])], 
    data_owner_id: ['Data Owner (if different from Customer)', formValidators.mustBeNumber], 
    order_time: [new Date(), Validators.compose([formValidators.mustBeDate, Validators.required])] 
}) 

을 그리고이 같은 ngModel로 미리 채우는 :

<form class="form" [formGroup]="form" (ngSubmit)="submitJob(f)"> 
     <legend>{{title}}</legend> 
     <div class="form-group"> 
     <label for="client_id">Client</label> 
    <select (change)="clientHasChanged($event.target.value)" class="form-control" id="client_id" formControlName="client_id" [(ngModel)]='job.client_id'> 
       <option value="" disabled selected>Customer</option> 
       <option *ngFor="let client of clients" [ngValue]="client.client_id">{{client.client_id}} - {{client.client_id_name}}</option> 
      </select> 

이것은 RC 완벽하게 잘 작동했다. 1 (이름이 바뀐 지침의 외부),하지만 지금은 오류 받고 있어요 :

browser_adapter.ts:74 EXCEPTION: Error in http://localhost:4200/app/+wih2/+job/job.component.html:6:129 ORIGINAL EXCEPTION: No value accessor for ''

램을 ngModel을 사용하면 오류가 제거되지만 데이터가 필요합니다. 다른 방법으로는이를 해결할 수 없습니다.

나는 새로운 형태의 모듈을 사용하고있어 그래, 난 그것으로 부트 스트랩 오전 :

bootstrap(AppComponent, [disableDeprecatedForms(), provideForms(), HTTP_PROVIDERS, APP_ROUTER_PROVIDERS]); 

몇 가지 답변을 기대하겠습니다!

편집 : 전체 스택 트레이스 stacktrace

+0

오류를 게시 할 수 있습니까? – maxisam

+0

하지만 내 생각 엔 '@ angular/common'의'import {NgForm} '을 잊어 버렸습니다. 그리고 실제로 ngModel에 의존 할 필요는 없습니다. client_id에 가입 할 수 있습니다. – maxisam

+0

NgForm을 가져오고 있습니다. 나는 내일 아침 전체 stacktrace를 게시 할 것이다. – yusijs

답변

1

나는 더 나은 솔루션 반응성 솔루션을 사용하고있는 것. 나는 년후 - 당신의 ngOnInit()

 
this.form.controls["client_id"].valueChanges.subscribe(value => { 
    this.job.client_id = value; 
}); 

그리고

+0

이것이 도움이되는 방법을 모르겠습니까? 나머지 API에서 데이터를 가져오고 있습니다. 존재하는 경우 해당 값을 미리 채울 것입니다. 내가 (변경)에서 사용하는 기능은 잘 작동한다고 생각합니다. – yusijs

+0

아 ... 그것은 실제로 반응 형 양식을 사용하기 때문에 ngModel을 사용할 필요가없는 방법입니다. – maxisam

+1

어떻게 이것을 역전 된 방식으로 사용할 수 있는지 알 수 있습니다. API에서 데이터를 가져 와서 거기에서 양식에 값을 추가하십시오. 그럴 수도 있습니다. 나는 그것을 아침에 들여다 볼 것이다! 이제 자. :) – yusijs

0

문제는 내가/각도 일반, 대신 @/각 형태 @에서 NgModel 수입이었다 템플릿 바인딩 속성을 사용하여이 같은

뭔가 NgModel이 형식과 너무 밀접하게 결합되어 있음을 인식하지 못했습니다.