Как установить динамическое значение для formControl в угловых 7

Question

У меня есть перетаскивание formBuilder, мы можем создавать формы, используя перетаскивание, поэтому теперь я столкнулся с проблемой, у меня есть скрытое поле в HTML, которое является TempleteJson.

Вот HTML-код

 <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>Form Name:</label>
      <input type="text" class="form-group" formControlName="TemplateName" />
    </div>
    <div class="form-group">
      <input type="hidden" class="form-group" formControlName="TemplateJson" />
    </div>
    <div class="form-group">
      <label>CreatedOn:</label>
      <input type="date" class="form-group" formControlName="CreatedOn" />
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

Вот файл component.ts

  formBuilder: any;
  formData: any;
  data: any;
 ngOnInit() {
    var id = this.route.snapshot.paramMap.get('id');

    this.dataService.GetFormById(+id).subscribe(response => {
      this.data = response['TemplateJson'];
      this.generateForm();
    },
      err => {
        this.generateForm();
      });

    initJq();
  }

userForm = new FormGroup({
    TemplateName: new FormControl(),
    TemplateJson: new FormControl(),
    CreatedOn: new FormControl(),
  });

 onSubmit() {
    console.log(this.userForm.value);
    this.dataService.addFormTemplate(this.userForm.value);
  }

Теперь в этом .data у меня есть json и этот json, который я хочу установить в TemplateJson FormControl, так как я могу это сделать.

Спасибо!

Answer 1

Вы можете использовать SetValue метод FormControl:

setValue():

Устанавливает новое значение для формыконтроль.

Таким образом, вы можете использовать его как:

this.userForm.controls['TemplateJson'].setValue(this.data.TemplateJson);

Stackblitz_Demo

Answer 2

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

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

В этом сценарии мы будем использовать patchValue для обновлениязначения в userForm.

Если свойства в TemplateJson совпадают с FormControlNames, вы можете просто сделать это следующим образом:

this.userForm.patchValue(this.data) 

Если имена разные,

this.userForm.patchValue({
  property1: this.data.bbb
  property2: this.data.aaa
  .
  .
})