I am trying to push a string value into a formArray using material forms, however it is returning this error:

Argument of type 'string' is not assignable to parameter of type 'AbstractControl'.

If I try and push a full object into the array it works fine, but as a string value it doesn't. This is where I declare the formArray:

this.maintenanceFormGroup = this._formBuilder.group({
      title: '',
      description: ['', Validators.required],
      maintenance_images_url: this._formBuilder.array([]),
  });

and this is where I try and push the string value(s) into the array:

  const pushDownloadUrlIntoMaintenancePhotosArray = flatMap(() => {
      return this._storage.downloadURL
        .map(url => {
          console.log(url)
          const controls = <FormArray>this.formGroup.controls.maintenance_images_url;
          controls.push(url);
        });
    });

Any suggestion as to why I am getting this error?

I am trying to push a string value into a formArray using material forms, however it is returning this error:

Argument of type 'string' is not assignable to parameter of type 'AbstractControl'.

If I try and push a full object into the array it works fine, but as a string value it doesn't. This is where I declare the formArray:

this.maintenanceFormGroup = this._formBuilder.group({
      title: '',
      description: ['', Validators.required],
      maintenance_images_url: this._formBuilder.array([]),
  });

and this is where I try and push the string value(s) into the array:

  const pushDownloadUrlIntoMaintenancePhotosArray = flatMap(() => {
      return this._storage.downloadURL
        .map(url => {
          console.log(url)
          const controls = <FormArray>this.formGroup.controls.maintenance_images_url;
          controls.push(url);
        });
    });

Any suggestion as to why I am getting this error?

• javascript
• angular
• typescript
• firebase
• angular-material

• Why pushing a string into FormArray which holds Controls of a form? Can you explain what is behin this._storage.downloadURL? – jmachnik Commented Jul 31, 2018 at 11:41
• @jmachnik a string value for the Url of an image is being stored there – Jm3s Commented Jul 31, 2018 at 11:45
• And the part with title: '' works well? Shouldn't it be title: [''] etc – jmachnik Commented Jul 31, 2018 at 11:48
• 1 controls.push(new FormControl(url)) – yurzui Commented Jul 31, 2018 at 12:07
• Your variable name is likely confusing you. controls is not actually an array of controls, it is your maintenance_images_url FormArray. Checking the docs shows FormArray.push() is expecting an AbstractControl and you are pushing a string instead. – Joseph Webber Commented Jul 31, 2018 at 12:48

1 Answer 1

you should initalize your maintenance_images_url formarray, for e.g:

const controls = <FormArray>this.maintenanceFormGroup.controls['maintenance_images_url'];
const urlControl = this.initUrl(url);
controls.push(urlControl);

initUrl(url) {
        return this.formBuilder.group({
            value: [url],
        });
    }

update:

const controls = this.maintenanceFormGroup.get('maintenance_images_url');
if (!controls.value.includes(url)) {
  controls.push(this.formBuilder.control(url));
}