如何以角度反应形式修补或设置特定输入字段的值

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 (formgroup)，例如 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
        })
      })
    })