Angular2 FormGroup의 값을 설정하십시오.

FormGroup에 값을 설정하려고합니다. 내 각 버전은 rc-5입니다. 여기 내 구성 요소입니다.Angular2 FormGroup의 값을 설정하십시오.

import { Component, Input, OnInit } from '@angular/core'; 
import { Subscription } from 'rxjs/Subscription'; 
import { Router, ActivatedRoute } from '@angular/router'; 
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; 

@Component({ 
    templateUrl: 'myHtmlPage.html', 
    providers: [ 
      UserService 
    ] 
}) 

export class UserDetailComponent implements OnInit { 
    user: User; 
    userDetailForm: FormGroup; 

    constructor(private userService: UserService, private route: ActivatedRoute, private formBuilder: FormBuilder) { 
      this.userDetailForm = this.formBuilder.group({ 
       email: new FormControl('', [<any>Validators.required]) 
      }); 
    } 

    getUser(id: number) { 
     this.userService.getById(id) 
      .subscribe((res) => { this.user = res.data; }, /*do stg*/,() => { this.userDetailForm.controls['email'].setValue(this.user.email); }); 
    } 

    ngOnInit() { 
     let id; 
     this.route.params.subscribe(params => id = +params['id']); 
     this.getUser(id); 
    } 

    //... 
}

여기 내 HTML입니다.

<form [formGroup]="userDetailForm" (ngSubmit)="editUser(userDetailForm.value)"> 
<div class="card card-inverse col-md-6 offset-md-3" style="background-color: #333; border-color: #333;"> 
    <div class="card-block"> 
     <h4 class="card-title row"> 
      Details 
     </h4> 
     <div class="form-group row"> 
      <div> 
       <label for="email" class="card-subtitle">Email</label> 
       <div> 
        <input class="form-control" type="text" id="email" formControlName="email" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

내 '사용자'클래스;

export class User { 
    email: string; 
}

이 코드에는 아무런 문제가 없으며 제대로 작동합니다. 하지만 'User'클래스에 몇 가지 속성을 추가하려면 어떻게해야합니까? 'onCompleted'콜백에서 매번이 값을 설정해야합니까? 내가 구독의 'onCompleted'콜백 생성자에서 코드를 이동하면, 나는 오류 다음 얻을 :

form group expects a form group instance. please pass one in

내가 'ngOnInit'방법 생성자의 코드를 이동하면 작품 비동기 가입 이후, 그것은 this.user.email의 값을 얻을 수 없습니다. 나를 도울 사람이 있습니까?

출처

2016-08-24 ulubeyn

this.form = this.formBuilder.group ({email='[email protected] '// 다음 다른 속성}) – rashfmnb

나는 이미 솔루션 시도'onCompleted '콜백. 내가 말했듯이, 그것은'form group expects .... '라는 오류를 던집니다. 그것은 내 방식으로 작동하지만이 문제에 대한 더 나은 해결책이 있는지 묻습니다. @rashfmnb – ulubeyn

저는 rc5에서 작동하지만 더 이상 REACTIVE_FORM_DIRECTIVES 지시문을 사용하지 않습니다. 내 Shared.Module.ts에서 ReactiveFormsModule을 가져오고 내 보냅니다. 문제가 해결되었거나 도움이 더 필요하면 알려주십시오.

@NgModule({ 
    imports: [CommonModule, FormsModule, ReactiveFormsModule, ...], 
    declarations: [...], 
    exports: [CommonModule, FormsModule, ReactiveFormsModule, ...] 
})

출처

2016-08-24 20:54:14

Angular2 FormGroup의 값을 설정하십시오.

답변

관련 문제