Angular 2+深层反应形式问题

时间:2018-08-30 13:36:14

标签: angular forms

过去几天,我一直在为此苦苦挣扎。我已经阅读了所有相关文章和其他文章,但仍然无法正确理解。

我有以下反应形式:

this.companyForm = this.formBuilder.group({
  ...
  ...
  ...
});
this.populateFeautureImages()

private populateFeatureImages() {
   this.Feature_images = this.formBuilder.array([]);

   this.comp.Feature_images.forEach((fImg) => {

     const subtitle = this.formBuilder.array([]);

     fImg.subtitle.forEach(fImgLang => {

       subtitle.push(this.formBuilder.group({
         lang: [fImgLang.lang],
         text: [fImgLang.text]
       }));
     });

     const title = this.formBuilder.array([]);

     fImg.title.forEach(fImgLang => {

       title.push(this.formBuilder.group({
         lang: [fImgLang.lang],
         text: [fImgLang.text]
       }));
     });

     this.Feature_images.push(this.formBuilder.group({
       image_url: [fImg.image_url],
       subtitle: subtitle,
       title: title
     }));
});

this.companyForm.addControl('Feature_images', this.Feature_images);


get FeatureImages() {
   return this.companyForm.get('Feature_images') as FormArray;
}

get FeatureImagesTitles() {
   return this.Feature_images.get('Feature_images.title') as FormArray;
}

get FeatureImagesSubtitles() {
   return this.Feature_images.get('Feature_images.subtitle') as FormArray;
}

company类是companyForm建模的对象。

现在,在模板中:

...
<div formArrayName="Feature_images">

          <div *ngFor="let fImg of FeatureImages.controls; index as i" [formGroupName]="i">        

            <mat-form-field class="w-100">
              <input
                  matInput
                  placeholder="Image Url"
                  value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                  formControlName="image_url"
              >
            </mat-form-field> 

            <div formArrayName="title">
                <div *ngFor="let fiTitle of FeatureImagesTitles.controls; index as j" [formGroupName]="j">
                    <mat-form-field class="w-100">
                        <input
                            matInput
                            placeholder="Text"
                            value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                            formControlName="text"
                        >
                    </mat-form-field>     
                </div> 
            </div>

            <div formArrayName="subtitle">
              <div *ngFor="let fiSubtitle of FeatureImages[i].controls.subtitle.controls; index as j" [formGroupName]="j">
                <mat-form-field class="w-100">
                  <input
                      matInput
                      placeholder="Text"
                      value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                      formControlName="text"
                  >
                </mat-form-field>     
              </div>                          
            </div>       
          </div>  

无论我做什么,迭代都可以使用外部表单数组(Feature_images)很好,但不能使用内部两个数组(titlesubtitles >

请帮忙吗?

0 个答案:

没有答案