web-dev-qa-db-ja.com

AngularのReactive Formsでフォームコントロールに値を設定する方法

こんにちは、私は角張った初心者です。実際、私はサービスとそのデータからデータをサブスクライブしようとしています。私のコントロールからフォームコントロールに渡しています（たとえば、編集フォームのようなものです）。

_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})
}
_

誰でも私に反応形式の値を設定する方法を教えてもらえますか？提案してください。

angularangular7angular-reactive-forms
24
sun

リアクティブフォームの設定または更新フォームコントロールの値は、patchValueとsetValueの両方を使用して実行できます。ただし、場合によっては patchValue を使用する方がよい場合があります。

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

このシナリオでは、userとquestioningのみを更新するため、patchValueを使用します。

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

編集：ES6の一部の Object Destructuring を実行したい場合は、代わりにこれを実行することに興味がありますか????

const { user, questioning } = this.question;

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

ターダー！

33
wentjun

Reactive Formには、フォームフィールドの値を更新する2つの主要なソリューションがあります。

setValue：

  • 初期化モデル構造コンストラクタ内：

    this.newForm = this.formBuilder.group({  
   firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]],
   lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]]
});

  • フォームのすべてのフィールドを更新する場合：

    this.newForm.setValue({
   firstName: 'abc',
   lastName: 'def'
});

  • フォームの特定のフィールドを更新する場合：

    this.newForm.controls.firstName.setValue('abc');

注： FormGroup内のすべてのフォームフィールドコントロールに完全なモデル構造を提供することが必須です。プロパティまたはサブセットのコレクションを見逃した場合は、例外がスローされます。

patchValue：

  • フォームの一部/特定のフィールドを更新する場合：

    this.newForm.patchValue({
   firstName: 'abc'
});

注： FormGroup内のすべてのフォームフィールドコントロールのモデル構造を提供することは必須ではありません。プロパティまたはサブセットのコレクションを見逃した場合、例外はスローされません。

9
Nadim Hossain Sonet

「通常の」解決策は、空のformGroupまたは完全なformGroupを返す関数を作成することです

createFormGroup(data:any)
{
 return this.fb.group({
   user: [data?data.user:null],
   questioning: [data?data.questioning:null, Validators.required],
   questionType: [data?data.questionType, Validators.required],
   options: new FormArray([this.createArray(data?data.options:null])
})
}

//return an array of formGroup
createArray(data:any[]|null):FormGroup[]
{
   return data.map(x=>this.fb.group({
        ....
   })
}

次に、SUBSCRIBEで、関数を呼び出します

this.qService.editQue([params["id"]]).subscribe(res => {
  this.editqueForm = this.createFormGroup(res);
});

注意してください！、初期エラーを回避するには、フォームに* ngIfを含める必要があります

<form *ngIf="editqueForm" [formGroup]="editqueForm">
   ....
</form>
3
Eliseo

これを試して。

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

setValueおよびpatchValue

1つのコントロールの値を設定する場合、これは機能しません。そのため、両方のコントロールの値を設定する必要があります。

formgroup.setValue（{name： ‘abc’、age： ‘25’}）;メソッド内のすべてのコントロールに言及する必要があります。これを行わないと、エラーがスローされます。

一方、patchvalueの方がはるかに簡単です。名前を新しい値として割り当てるだけだとします。

formgroup.patchValue（{name： ’abc’}）;

1
TAB

単一のフォームコントロールに/個別に値を割り当てるには、次のようにsetValueを使用することをお勧めします。

this.editqueForm.get('user').setValue(this.question.user);

this.editqueForm.get('questioning').setValue(this.question.questioning);
1
Devner