Angular4フォームビルダダイナミック

Question

私はAngles（4）on Railsアプリケーションで作業していて、CRUD機能を終了しようとしています。私はフロントエンドの面で「編集」を扱う方法についていません。

ボタンをクリックしたときにロジックを手動でテストしましたが、フォームを事前に入力するのが苦労しています。

提案フロー

• ユーザーgetClients()機能を実行Clientsをクリックします。
• Clientsページには、clients/:idページに移動するクライアントごとにIDがクリック可能です。
• clients/:idはparams['id']
• 形態でgetClientById()機能通過が

マイ・コンポーネントを実行しているeditClientByIdに提出された情報

で事前移入され実行

@Component({ 
    selector: 'app-client-index', 
    templateUrl: './client-index.component.html', 
    styleUrls: ['./client-index.component.sass'] 
}) 
export class ClientIndexComponent implements OnInit { 
    constructor(private clientService: ClientService, 
       private activatedRoute: ActivatedRoute, 
       private fb: FormBuilder 
) { } 
    public indexForm: FormGroup; 
    public submitted: boolean; 
    public events: any[] = []; 
    client = Client; 

    ngOnInit() { 
    this.activatedRoute.params.subscribe((params: Params) => { 
     let id = params['id']; 
     this.clientService.getClientById(params['id']); 
     this.indexForm = new FormGroup({ 
     name: ['', <any>Validators.required], 
     status: [''], 
     logo: [''] 
    }); 
    } 
    } 


    edit(model: Client, isValid: boolean) { 
    this.submitted = true; 

    console.log(model, isValid); 
    } 



    // demo(){ 
    // console.log('pressed'); 
    // this.clientService.editClientById({ 
    //  'id': 4, 
    //  'name': 'Demo User2222', 
    //  'status': 'This', 
    //  'logo': "Test" 
    // }) 
    // } 

} 

サービス

getClientById(id): Observable<Client> { 
    return this.authToken.get('clients/' + id) 
     .map(res => res.json()) 
     .catch((error: any) => Observable.throw(error.json().error || 'Server error')); 
    } 


    editClientById(client:any): Observable<Client> { 
    return this.authToken.patch('clients/' + client.id, client) 
     .map(res => res.json()) 
     .catch((error: any) => Observable.throw(error.json().error || 'Server error')); 
    } 

現在ngOnInit機能は、私は夫婦SO記事や私が見てきたスコッチのチュートリアルに基づいてしようとしているものです。これまで私が得た最も近いものは、APIに送信ボタンpatchを送信していましたが、フィールドにあらかじめ入力していませんでした。

現在の設定では、まったく動作していません。 ngOnInitのロードが完了する前に私のgetClientByIdが実行されているか、まったく機能しているかどうかは分かりません。

私はモデルにバインドする必要があると思いますが、なんとなくわかりません。

Answer 1

サービスでgetClientByIdを呼び出した結果を購読し、結果を取得してpatchValueを使用して、取得したクライアントオブジェクトのフィールドをフォームフィールドに配置する必要があります。

あなたのサービス呼び出しの結果に加入し、その後、最初のフォームのために構築します。例えば

（ちょうどこれをタイプし、テストしていません...）

this.indexForm = new FormGroup({ 
     name: ['', <any>Validators.required], 
     status: [''], 
     logo: [''] 
); 
this.clientService.getClientById(params['id']).subscribe(client => { 
    this.indexForm.patchValue({ 
name: client.name, 
status: client.status, 
logo: client.logo 
});