大家好我是新来的.实际上,我正试图从一个服务订阅数据,而这些数据,我正在从传递给我的表单控制(例如,它就像一个编辑表单).

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

谁能告诉我如何为我的react 形式设置值吗.请推荐我.

推荐答案

可以使用patchValue和setValue来设置或更新被动表单表单控制值.然而,在某些情况下使用patchValue可能更好.

patchValue不需要在参数内指定所有控件才能更新/设置表单控件的值.另一方面,setValue要求填写所有窗体控件值,如果参数中没有指定任何控件,它将返回错误.

在这种情况下,我们希望使用patchValue,因为我们只更新userquestioning:

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

塔达!

Angular相关问答推荐

如何在垫子表格字段旁边设置图标

HTTP Get请求未发送到提供的URL

将Angular 17中的http服务与独立组件一起使用

Angular 升级到v16和Ant设计错误:';nzComponentParams';类型';ModalOptions';中不存在

为什么在回调完成之前,可观察对象会返回?

更改动态表单控制Angular 的值

Angular 16-错误NG8002:无法绑定到NGModel,因为它不是输入的已知属性

如何将表单作为Angular 分量输入传递?

Angular CLI 与 Angular 版本不兼容

完成行为主体

Angular:为什么在 ngAfterContentInit 之后变量未定义?

iss 声明无效 Keycloak

angular4应用程序中输入的最小值和最大值

使用 Angular2 将文件上传到 REST API

等待多个promises完成

Angular 2如何让子组件等待异步数据准备好

将 Angular 5 升级到 6 时,我得到不兼容的对等依赖(使用 ng update @angular/core)

Angular 6在输入键上添加输入

NG 测试中的调试测试

Angular 2 输出到router-outlet