The Angular Reactive Forms error message indicates that attempting to assign a 'string' type to an 'AbstractControl' parameter is invalid

While attempting to add a string value to a formArray using material forms, I encountered the following error message:

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

If I try adding a complete object to the array, it works without any issues. However, when trying to add a string value, it fails. This is where the formArray is declared:

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

Here's where I attempt to 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);
        });
    });

I'm puzzled by this error - any suggestions on why it might be occurring?

Answer №1

To properly set up your maintenance_images_url formarray, you can do the following:

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

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

Here's an update:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with retrieving properties in Angular template due to undefined values in HTML

As a newbie to Angular, I am dedicated to improving my skills in the framework. In my project, I am utilizing three essential files: a service (Studentservice.ts) that emits an observable through the ShowBeerDetails method, and then I subscribe to this ob ...

Expanding Java Classes and Replacing Methods with Multiple Parameters in ES4X/Graal

I am currently facing a challenge in my JavaScript project using ES4X/Graal, where I need to extend a Java class. This Java class has methods with overloaded parameters that I must override. While I understand how to call a specific Java method by specifyi ...

Utilizing VueMq for personalized breakpoints and module inclusions

In my main app.js, I set and define breakpoints by importing the VueMq package. import VueMq from 'vue-mq'; Vue.use(VueMq, { breakpoints: { xsmall: 500, small: 768, medium: 1024, large: 1360, x ...

random mongoose response 500

I came across a nodeJS code recently that was supposed to retrieve random documents from my mongoose collection using the mongoose-random plugin. However, whenever I call the findRandom() method, it returns a 500 error. test.js Below is the code snippet: ...

Tips for efficiently combining mergeMap observables and providing a singular value for the entire observable

Consider this particular case involving TypeScript/angular with rxjs 6.5: main(){ const items = ['session', 'user']; const source: Observable<any> = from(items); source .pipe( ...

Navigating with VueRouter in your Chrome Extension is a breeze

I have been working on a Chrome extension using Vue 3 + VueRouter. One issue I encountered was trying to change the router-view content to display a different component, essentially showing users a different UI. Despite my efforts and various methods use ...

Speedier display of information in angular2

I have been exploring ways to optimize data rendering with Angular2 for increased performance. While using the Edge F12 profiler, I noticed that there is a significant amount of processing time, taking around 250-500ms (on a core i7u CPU) to render a list ...

Having trouble accessing the POST RESPONSE json in ReactJS and NodeJS

I have set up my own API server that is connected to a MySQL database. Whenever I send a request to the server, everything seems fine. I can see the input from the browser and the output from the database in the console. However, I am unable to see any new ...

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

I am seeking guidance on creating a grid with a variable number of columns and rows. It should be contained within a separate div and should not interfere with other objects or alter the parent's size. The grid needs to be square and I am currently u ...

The solution for fixing contenteditable is as follows:

I am currently working on a script to clean up pasted text within a contenteditable div. While the script is functioning well for most part, I have noticed that in Firefox, line breaks get removed when the text is copied within or between the divs. Does ...

including identical item in the array

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <body> <script> var app = angul ...

Ways to switch the positions of two characters in a text box

Is there a way to access the text content of a textarea and swap the two characters around the cursor using Javascript? I am interested in creating a Chrome extension that will allow me to quickly correct typos in Gmail. (I am assuming that the main editin ...

The integration of Laravel (Homestead) Sanctum is malfunctioning when combined with a standalone Vue application

After running the command php artisan serve my Laravel application successfully resolves on localhost:8000. I have configured Laravel Sanctum as follows: SESSION_DRIVER=cookie SESSION_DOMAIN=localhost SANCTUM_STATEFUL_DOMAINS=localhost:8080 As for m ...

The 'DOCUMENT' module (imported as 'i23') could not be located within '@angular/platform-browser'

During my upgrade from Angular version 7 to 8, I encountered an error when building the project even though I am not using DOCUMENT. It seems like something is causing this issue that I am overlooking. I have thoroughly checked all the files and confirmed ...

Obtain the Key with the Greatest Value from a JSON Object

I'm currently working with data fetched from an API response in an attempt to identify the pitch with the highest speed. Below is a snippet from the API response. { page: 1, total_pages: 4, listings: [ { name: "Zack Greinke", pitc ...

Creating a custom dialog box using JavaScript

How can I create a customized dialog box in the center without displaying "the host name says..." using CSS? function myFunction() { alert("Record Save"); } Thank you in advance! ...

Unable to compile angular project - Encountering Error - The data path ".builders['app-shell']" must contain the mandatory property 'class'

While attempting to construct an angular project, I encountered the following error: Data path ".builders['app-shell']" should have the required property 'class'. Error: Schema validation has failed with the errors noted below: Data pa ...

Cookie-powered JavaScript timer ceases after 60 seconds

I'm having an issue with my countdown timer where it stops counting after just one minute. It seems to pause at 54:00 when I set it for 55 minutes, and at 1:00 when I set it for 2 minutes. Any suggestions on how I can resolve this and make it continue ...

Expanding a piece of Bootstrap within an Angular project results in exceeding the "budget" during CI/CD implementation

I have incorporated Bootstrap into my Angular project. In order to streamline my code, I replaced the Bootstrap mt-4 class with form-item for elements wrapping form controls, labels, and validation messages. I then defined the styling for these items in th ...

Scrolling Container Following Down the Page, Halts at Its Own Bottom (Similar to Twitter)

I am facing an issue and need some help. I am working on creating a three-column page layout where the middle section is for posts, the right section is for links and references (a bit long), and the left section is fixed. My question is: How can I preven ...