[解決済み] AngularのReactive Formsでフォームコントロールに値を設定する方法

質問

こんにちは、angularの初心者です。実は、私はあるサービスからデータを購読しようとしていて、そのデータを私のフォームコントロールに渡しています（例：編集フォームのようなものです）。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { QuestionService } from '../shared/question.service';

@Component({
  selector: 'app-update-que',
  templateUrl: './update-que.component.html',
  styleUrls: ['./update-que.component.scss']
})
export class UpdateQueComponent implements OnInit {

  questionsTypes = ['Text Type', 'Multiple choice', 'Single Select'];
  selectedQuestionType: string = "";
  question: any = {};

  constructor(private route: ActivatedRoute, private router: Router,
    private qService: QuestionService, private fb: FormBuilder) { 

  }

  ngOnInit() {
      this.getQuebyid();
  }

  getQuebyid(){
    this.route.params.subscribe(params => {
      this.qService.editQue([params['id']]).subscribe(res =>{
        this.question = res;
      });
    });
  }

  editqueForm =  this.fb.group({
    user: [''],
    questioning: ['', Validators.required],
    questionType: ['', Validators.required],
    options: new FormArray([])
  })

  setValue(){
    this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
  }

}

を使用すると [(ngModule)] を使用すると、正常に動作しますが、angular 7 バージョンで非推奨になるという警告が表示されます。

<textarea formControlName="questioning" [(ngModule)]="question.questioning" cols="70" rows="4"></textarea>

というわけで、以下のようにしてフォームコントロールに値を設定したのですが、要素にその値が表示されないのです。

setValue(){
   this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
}

誰か私の反応フォームに値を設定する方法を教えてください。私に提案してください。

どのように解決するのですか？

Reactive Forms フォームコントロールの値の設定や更新は、patchValue と setValue の両方を使用して行うことができます。しかし、より良い方法は patchValue を使った方が良い場合もあります。

patchValue は、フォームコントロールの値を更新/設定するために、すべてのコントロールをパラメータ内に指定する必要はありません。一方 setValue では、すべてのフォームコントロールの値を入力する必要があり、パラメータ内に指定されていないコントロールがある場合は、エラーを返します。

このシナリオでは、更新されるのは user と questioning :

this.qService.editQue([params["id"]]).subscribe(res => {
  this.question = res;
  this.editqueForm.patchValue({
    user: this.question.user,
    questioning: this.question.questioning
  });
});

編集：もしあなたが、ES6 の オブジェクトのデストラクチャリング をやりたくなったら、代わりにこれをやると面白いかもしれません。

const { user, questioning } = this.question;

this.editqueForm.patchValue({
  user,
  questioning
});

ジャジャーン!