Question

我需要使用formArray创建一个动态表单。

我点击AddItem，并且必须创建上传文件的输入。

在HTML中使用此代码：

    <div class="row m-auto col-md-12 pb-4">
    <div class="col-md-2 col-xs-2 col-sm-2 col-lg-2 col-xl-2">
        <button (click)="AddItem()" mat-stroked-button color="warn">
            <i class="la la-plus"></i>
            <label class="pr-2 pl-2">
                ایجاد فایل جدید
            </label>
        </button>
    </div>
</div>
<mat-divider></mat-divider>
<div class="row m-auto col-md-12 pt-2">
    <form [formGroup]="uploadFormGroup">
        <div class="left row m-auto col-md-12 col-xs-12 col-sm-12 col-lg-12 col-xl-12" formArrayName="files"
            *ngFor="let project of uploadFormGroup.get('files').controls; let i = index">
            <ng-container [formGroupName]="i">
                <div class="col-md-2 col-lg-2 col-xl-2 col-sm-12">
                    <mat-form-field class="mat-form-field-fluid" formControlName="postId" appearance="outline">
                        <mat-label>{{ 'POST.FILE_TYPE' | translate }}</mat-label>
                        <mat-select>
                            <mat-option *ngFor="let item of fileType | enumToArray" [value]="item">
                                {{ 'ENUM.FILE_TYPE.'+item | translate }}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </div>
                <div class="col-md-5 col-lg-5 col-xl-5 col-sm-5">
                    <mat-form-field appearance="outline">
                        <mat-label>{{ 'GENERAL.PHOTO' | translate }}</mat-label>
                        <mat-icon matSuffix>image</mat-icon>
                        <ngx-mat-file-input appearance="outline" formControlName="file" type=file
                            [placeholder]="'GENERAL.PHOTO' | translate">
                        </ngx-mat-file-input>
                    </mat-form-field>
                </div>
                <div class="row m-auto col-md-5 col-sm-5 col-lg-5 col-xl-5 col-lg-5 pb-4">
                    <div class="col-md-3 col-xs-3 col-sm-3 col-lg-3 col-xl-3">
                        <button mat-flat-button color="warn" (click)="removeItem(i)">حذف</button>
                    </div>
                    <div class="col-md-4 col-xs-4 col-sm-4 col-lg-4 col-xl-4">
                        <button mat-flat-button color="primary">پیش نمایش</button>
                    </div>
                    <div class="col-md-3 col-sm-3 col-lg-3 col-xl-3">
                        <button mat-flat-button color="accent" (click)="Upload(i)">آپلود</button>
                    </div>
                </div>
            </ng-container>
        </div>
    </form>
</div>

和此代码在ts文件中：

  @Input() private postId: number;

  uploadFormGroup: FormGroup;
  fileType = TypeFile;
  fileUpload: FileUpload;

  constructor(private formBuilder: FormBuilder, private postService: PostService) { }

  ngOnInit(): void {
    this.uploadFormGroup = this.formBuilder.group({
      postId: [''],
      files: this.formBuilder.array([]),
      typeEnum: ['', Validators.compose([Validators.required])]
    });
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      file: ['']
    });
  }

  removeItem(index: number): void {
    const Item = <FormArray>this.uploadFormGroup.controls['files'];
    Item.removeAt(index);
  }

  AddItem(): void {
    const Item = <FormArray>this.uploadFormGroup.controls['files'];
    console.log(Item);
    Item.push(this.createItem());
  }

  Upload(fileId: number): void {

    this.fileUpload.postId = this.postId;
    this.fileUpload.typeEnum = this.uploadFormGroup.controls['typeEnum'].value;
    this.fileUpload.files = <FormArray>this.uploadFormGroup.controls['files'][fileId].value;
    this.postService.UplaodFile(this.fileUpload).subscribe(data => {
      console.log(data);
    });
  }

}

现在，当我单击AddItem()时，它向我显示此错误：

找不到具有以下路径的控件：“文件-> 0-> postId”

问题出在哪里？???

Answer 1

请再次检查您的代码 postId控件位于uploadFormGroup下，而不位于文件formArray下，并且您正在尝试访问文件formArray下的postId

您必须在文件formArray中添加postId或在HTML中的formArray循环外访问它

createItem(): FormGroup {
 return this.formBuilder.group({
  file: new FormControl(),
  postId: new FormControl()
 });
}

找不到路径如下的控件：“文件-> 0-> postId”

1 个答案: