如何以角度反應形式修補或設置特定輸入字段的值

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