如何在 angular 响应式表单中修补或设置特定输入字段的值

Question

处理最初数据为空的反应式嵌套表单，因为数据来自对话框中的某些字段（当对话框关闭时。）

我需要在数据可用时为表单的特定字段设置值，而不会导致表单重置。

这是有效负载结构

data = {
  name: "", 
  imagesList: [
    {
      imagePath: "",
      imageDescription: [
        {
          language: "",
          text: ""
        }
      ]
    },
  ],
  }

对应的FormArray结构供参考

在下面的代码中，** openImagesDialog()** 函数正在接收来自对话框关闭后订阅时可观察到的响应的数据。

  openImagesDialog(){
    this.companyNewsDialogServiceService.imagesListDataRecieved.subscribe(res => {
      console.log("imagetest",res)
      this.modalResponseData = res
      this.imageFilePath = this.modalResponseData.data.filepath
      this.imageDescText = this.modalResponseData.data.text
      this.imageFileName = this.modalResponseData.data.filename
      console.log("imagedata", this.imageFilePath)
      console.log("imageDescText", this.imageDescText)
      this.data.imagesList.forEach(x => {
        x.imagePath = this.imageFilePath
        x.imageDescription.forEach(y => {
          y.text = this.imageDescText
        })
      })
      this.createAppForm = this.setFormGroup(this.data);
      console.log("image-form-data", this.createAppForm.value)
    })
    this.companyNewsDialogServiceService.confirmImagesListDialog({
      title: 'Images List',
      description: 'Images List Description',
      imageSrc: "",
      modalFormData: this.companyNewsDialogServiceService.recivedFormData,
      showText: true
    }); 
  }

下面的代码用于根据有效负载形成嵌套表单结构，其中我将 setFormGroup() 函数分配给 createAppForm（表单组），如 this.createAppForm = this.setFormGroup(this.data);在构造函数中

表单结构代码

  get imagesListFormData(){
    return <FormArray>this.createAppForm.get('imagesList')
  }

  getImageDescriptionFormData(index: number){
    return <FormArray>this.imagesListFormData.at(index).get('imageDescription');
  }
  setImageDescription(data: any = null){
    data = data || { language: null, text: null };
    return this.fb.group({
      language: [this.selectedLanguage, Validators.required],
      text: [this.imageDescText, Validators.required],
    });
  }
  setImagesList(data: any = null) {
    data = data || { assetType: null, assetLink: null, filePath: null, description: null };
    return this.fb.group({
      imagePath: [this.imageFilePath, Validators.required],
      imageDescription: this.fb.array(
        data.imageDescription
        ? data.imageDescription.map((x: any) => this.setImageDescription(x))
        : []
      )
    }
    );
  }
  setFormGroup(data: any = null) {
    // debugger
    data = data || {imagesList: null};
    return this.fb.group({
      name: [''], 
      imagesList: this.fb.array(
        data.imagesList ? data.imagesList.map((x: any) => this.setImagesList(x)): []
      )
    });
  }
  createCompanyNews(){
    const formData = this.createAppForm.getRawValue();
    console.log(formData)
    let payload = formData
    this.createCompanyNewsService.CreateCompanyNews(payload).subscribe((res: any) => {
      console.log(res)
    })
  }
  selectLanguage(language : any){
    this.selectedLanguage = language;
    console.log(this.selectedLanguage)
  }

下面的代码是在**openImagesDialog()**函数中订阅的服务文件，用于从下面的代码接收数据

export class CompanyNewsDialogServiceService {
  recivedFormData: any;
  imagesListDataRecieved: Subject<CompanyNewsDialogServiceService> = new Subject();
  constructor(private dialog : MatDialog) { }
  confirmImagesListDialog(data: ConfirmDialogData) {
    return this.dialog.open(UploadFileDialogComponent, {data}).afterClosed().subscribe(res =>{
      this.recivedFormData = res;
      console.log('formdata',this.recivedFormData)
      this.imagesListDataRecieved.next(res) ;
    });
  }
}

目前我正在重新设置表单，因为数据来自对话框，由于表单重置，导致之前为表单的名称字段输入的数据丢失。我知道错了

我需要修补或将 openImagesDialog() 函数内的值设置为仅在负载字段下方，我分别在 openImagesDialog() 函数内获取这些字段的数据。

最初下面这些字段都是空的。这些字段的数据来自对话框关闭后的对话框。

imagePath、imageDescription -> imagesList 数组的文本字段**

Answer 1

您可以根据您在以下函数中提供的有效载荷结构来设置值。这不会创建表单重置并仅将值分配给各个字段的值。

从下次开始尝试简单地回答这个问题，这个问题也不够简洁，无法回答您的结构。

  openImagesDialog(){
    this.companyNewsDialogServiceService.imagesListDataRecieved.subscribe(res => {
      console.log("imagetest",res)
      this.modalResponseData = res
      this.imageFilePath = this.modalResponseData.data.filepath
      this.imageDescText = this.modalResponseData.data.text
      this.imageFileName = this.modalResponseData.data.filename
      let getImagesList = <FormArray>this.createAppForm.get('imagesList')
      console.log("imageListControl", getImagesList)
      console.log("image",getImagesList.value)
      getImagesList.value.forEach( (x: any) => {
        x.imagePath = this.imageFilePath
        x.imageDescription.forEach( (y: any) => {
          y.text = this.imageDescText
        })
      })
    })

如何在 angular 响应式表单中修补或设置特定输入字段的值

How to patch or set value for particular input field in angular reactive forms

angular

angular-material

angular-reactive-forms

angular-forms