无法在字符串“ documents”上创建属性“ validator”

Question

我创建了一个动态数组表单，因此我可以添加无限量的项目

.html文件 '

<div class="row" style="margin-bottom: 10px;margin-top: 10px;">
            <div class="col">
                <label>Number of videos</label>
                <select formControlName="numberofVideo" class="form-control" (change)="onChangeVideo($event)">
                <option value=""></option>
                <option *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">{{i}}</option>
                </select>
                <div *ngFor="let ticket of t.controls; let i = index;">
                    <div formGroupName="videos">
                        <p style="margin-top: 5px;">Video {{i+1}}</p>
                        <div>
                            Select Video: <input (change)="postVideo($event)" formControlName="uploadVideo" type="file" id="uploadVideo" name="uploadVideo">
                            <div class="progress " style="margin-top: 5px; height: 20px; ">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success " role="progressbar " [style.width]="(progressVideo | async) + '%' " [attr.aria-valuenow]="(progressVideo | async) " aria-valuemin="0 " aria-valuemax="100 ">
                                </div>
                                {{ progressVideo | async }}% Complete
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <label>Number of Document</label>
                <select formControlName="numberofDoc" class="form-control " (change)="onChangeDoc($event)">
                <option value=""></option>
                <option *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">{{i}}</option>
                </select>
                <div *ngFor="let video of x.controls;let i = index;">
                    <div formGroup="documents">
                        <p style="margin-top: 5px;">Document {{i+1}}</p>
                        <div>
                            Select Document: <input (change)="postDoc($event)" formControlName="uploadDocument" type="file" id="uploadDocument" name="uploadDocument">
                            <div class="progress " style="margin-top: 5px; height: 20px; ">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar " [style.width]="(progressDoc | async) + '%' " [attr.aria-valuenow]="(progressDoc | async) " aria-valuemin="0 " aria-valuemax="100 ">
                                </div>
                                {{ progressDoc | async }}% Complete
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

' .ts文件 '

ngOnInit() {
    this.uploadForm = this.formBuilder.group({
      uploadName: ['',Validators.required],
      uploadPrice: ['',Validators.required],
      uploadAuthor: ['',Validators.required],
      uploadDes: ['',Validators.required],
      uploadImage: ['',Validators.required],
      numberofVideo: [''],
      videos: new FormArray([]),
      numberofDoc: [''],
      documents: new FormArray([])
    })
  }



get f(){
    return this.uploadForm.controls;
  }
  get t(){
    return this.f.videos as FormArray;
  }
  get x(){
    return this.f.documents as FormArray;
  }

  onChangeVideo(e){
    const numberOfVideo = e.target.value || 0;
    if(this.t.length < numberOfVideo){
      for(let i=this.t.length;i<numberOfVideo;i++){
        this.t.push(this.formBuilder.group({
          uploadVideo: new FormControl('')
        }));
      }
    }else{
      for(let i = this.t.length; i >= numberOfVideo;i--){
        this.t.removeAt(i)
      }
    }
  }

  onChangeDoc(e){
    const numberOfDoc = e.target.value || 0;
    if(this.x.length < numberOfDoc){
      for(let i=this.x.length;i<numberOfDoc;i++){
        this.x.push(this.formBuilder.group({
          uploadDocument:new FormControl('')
        }));
      }
    }else{
      for(let i = this.x.length; i >= numberOfDoc;i--){
        this.x.removeAt(i)
      }
    }
  }

'

错误 AdminComponent.html：46错误错误：无法找到路径为“视频-> uploadVideo”的控件 AdminComponent.html：66错误TypeError：无法在字符串“ documents”上创建属性“ validator” AdminComponent.html：66错误TypeError：this.form.get不是函数