Как установить значение для элемента управления формы в Reactive Forms in Angular

Question

Привет всем, я новичок в угловой. На самом деле, я пытаюсь подписать данные из службы и эти данные, которые я передаю, чтобы передать свой контроль формы (например, это похоже на форму редактирования).

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)] в своем поле формы, чтобы установить значение для моего элемента, оно работает нормально и выдает предупреждение, что оно будет устаревшим в версии 7 angular.

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

Итак, я установил значения для моего элемента управления формой, выполнив ниже, но элемент не показывает эти значения.

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

Может кто-нибудь сказать мне, как установить значения для моей реактивной формы. Пожалуйста, предложите мне.

Answer 1

Установка или обновление значений элемента управления формы Reactive Forms можно выполнить с помощью patchValue и setValue. Однако в некоторых случаях может быть лучше использовать patchValue .

patchValue не требует указания всех элементов управления в параметрах для обновления / установки значения ваших элементов управления формы. С другой стороны, setValue требует, чтобы все значения элемента управления формы были заполнены, и он вернет ошибку, если какой-либо из ваших элементов управления не указан в параметре.

В этом сценарии мы захотим использовать patchValue, поскольку мы обновляем только 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
});

Ta-д!

Answer 2

«Обычное» решение - сделать функцию, которая возвращает пустую форму 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>

Answer 3

В Реактивная форма , есть два основных решения для обновления значений в поле (ах) формы.

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({
     firstName: 'abc'
  });
  

Примечание: Обязательно предоставить полную структуру модели для всех элементов управления поля формы в FormGroup. Если вы пропустите какое-либо свойство или наборы подмножеств, оно выдаст исключение.

patchValue:

• Если вы хотите обновить некоторые / определенные поля формы:

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

Примечание: Не обязательно указывать структуру модели для всех / любых элементов управления полями формы в FormGroup. Если вы пропустите какое-либо свойство или наборы подмножеств, оно не выдаст исключений.

Answer 4

Попробуйте это.

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

, если вы хотите установить значение одного элемента управления, это не будет работать, поэтому вам придетсяустановите значение обоих элементов управления:

formgroup.setValue ({name: 'abc', age: '25'});Необходимо упомянуть все элементы управления внутри метода.Если этого не сделать, будет выдано сообщение об ошибке.

С другой стороны, значение патча для этой части намного проще, скажем, вы хотите назначить имя только как новое значение:

formgroup.patchValue ({имя: 'ABC'});

Answer 5

Используйте patchValue() метод, который помогает обновить даже подмножество элементов управления.

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

---

Из угловых документов setValue() метод:

Ошибка При сбое строгих проверок, например, при установке значения элемента управления, который не существует, или при исключении значения элемента управления .

В вашем случае отсутствует объект options и questionType контрольное значение, поэтому setValue() не удастся обновить.