Dynamic component doesn't work with formarray angular

Asked
Active3 hr before
Viewed126 times

7 Answers

dynamiccomponent
90%

turns out, the value to use in ng switch doesn't work properly, i've fixed this by using [(value)] instead [(selected)] when selecting the ngswitch,Connect and share knowledge within a single location that is structured and easy to search., Why can't you recreate your problem in stackblitz (or any other live coding site)? – Kurt Hamilton Apr 11 '20 at 8:08 , even if i use the entire code from stackblitz.com/edit/angular-dynamic-survey-creation-golkhg it doesn't work – naoval Apr 11 '20 at 8:18

I creating a form builder like this https://stackblitz.com/edit/angular-dynamic-survey-creation-golkhg?file=src%2Fapp%2Fcreate-survey%2Fcreate-survey.component.html I do exactly like that but I don't use material design and this part doesn't work

<div *ngIf="questionCtrl.controls.questionGroup.controls.options">
   <ul class="question-type" formArrayName="options">
      <li *ngFor="let optionCtrl of questionCtrl.controls.questionGroup.controls.options.controls let j = index">
         <div [formGroupName]="j">
            <mat-form-field>
               <input formControlName="optionText" matInput placeholder="option text" maxlength="100" [required]="true">
            </mat-form-field>
            <button mat-raised-button *ngIf="j>=2" (click)="removeOption(i,j)" color="warn">
               X
            </button>
         </div>
      </li>
   </ul>
   <button mat-raised-button type="button" (click)="addOption(i)" class="mat-sm-button add-option-btn" color="accent"> Add option</button>
</div>
<div *ngIf="questionCtrl.controls.questionGroup.controls.showRemarksBox">
   <mat-slide-toggle formControlName="showRemarksBox">
      Show Remarks Textarea
   </mat-slide-toggle>
   <mat-form-field class="full-width">
      <textarea style="resize: none;" disabled matInput placeholder="Textarea"></textarea>
   </mat-form-field>
</div>
load more v
88%

Next, let’s define a method to create our contacts form group. The method will return the three form controls, inside a form group.,With the above method, instead of writing this in our code to get a contact form group controls value.,Then, below our value of contact form control, we are going to check whether the form has all possible errors. Using the hasError() method.,Then, let’s define two properties in our component class: form and contacts properties. The first holds our form model and the second holds our contacts forms array:

$ ng new angular - dynamic - form - fields - reactive - forms
load more v
72%

This is extremely powerful - for example, as the content of an ngFor is made into a self-contained view, it can be created and destroyed with just two function calls. There’s no need for the main component view to work out what to add or remove from the DOM - the embedded view (created by the ngFor) knows what it has created and what it needs to destroy.,Once the component is created, the host view can then be attached anywhere inside the parent component’s view, e.g. inside of a ViewContainerRef.,Now that we’ve got the component factory, we can simply tell our ViewContainerRef to create this component for us:,A host view is a thin view that deals with creating our component for us, in lieu of an existing component view. It creates the DOM node for the component’s selector, as well as initialises the wrapper and the main view, much like what we touched on above.

** /app/dynamic - form
load more v
65%

in dynamic Form Builder Component is following. <button (click)="addItem()">Add,Actually you have to paste the following code into the dynamicFormBuilderComponent.ts..,import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; import { FormGroup, FormControl, Validators,FormArray,FormBuilder } from '@angular/forms';,My code is following .

this.form = new FormGroup({
   "items": new FormArray([new FormGroup(this.fieldsCtrls)])
});
console.log('fieldsCtrls', this.form)
// this.form = new FormGroup(fieldsCtrls);
load more v
75%

After that, import classes related to the reactive form in the component that is going to contain the form.,The FormArray class is used to create a dynamic form. But before that, let us explore other essential classes that constitute a reactive form. They are:,As of now, you have learned about all important classes that constitute a reactive form in Angular.,Reactive forms are more suitable to create a dynamic form. So, let us get started with learning important classes that constitute a reactive form.

To work with reactive forms, you need to add ReactiveFormsModule in the imports array of the AppModule.

import {
   BrowserModule
} from '@angular/platform-browser';
import {
   NgModule
} from '@angular/core';
import {
   ReactiveFormsModule
} from '@angular/forms';

import {
   AppComponent
} from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule, ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule {}
load more v
40%

To work with a FormArray you do the following:,You’ve changed the structure of the form controls in the component class; you must make corresponding adjustments to the component template.,Make a new file called hero-detail.component.ts in the app directory and import these symbols:,The user cancels changes and reverts the form to the original state by pressing the Revert button.

export class Hero {
   id = 0;
   name = '';
   addresses: Address[];
}

export class Address {
   street = '';
   city = '';
   state = '';
   zip = '';
}

export const heroes: Hero[] = [{
      id: 1,
      name: 'Whirlwind',
      addresses: [{
            street: '123 Main',
            city: 'Anywhere',
            state: 'CA',
            zip: '94801'
         },
         {
            street: '456 Maple',
            city: 'Somewhere',
            state: 'VA',
            zip: '23226'
         },
      ]
   },
   {
      id: 2,
      name: 'Bombastic',
      addresses: [{
         street: '789 Elm',
         city: 'Smallville',
         state: 'OH',
         zip: '04501'
      }, ]
   },
   {
      id: 3,
      name: 'Magneta',
      addresses: []
   },
];

export const states = ['CA', 'MD', 'OH', 'VA'];
load more v
22%

In our template, we bind our form element with [formGroup]="form". On the ngSubmit event we will log the form value. Right now our form doesn't do anything useful. We next need to add our dynamic list of checkboxes. Let's add a new FormArray to our form.,First, we are going to start with creating our FormGroup in our TypeScript and Template for the component., Forms can be complicated. With Angular let's make it simple. , Reusable UI Components for all your Web Applications

For our use case, we have a list of orders for a user to choose from. The business rules state that the user must select at least one order before being able to submit the form. Let's take a quick look at the data we are going to be using.

const ordersData = [{
   id: 1,
   name: 'order 1'
}, {
   id: 2,
   name: 'order 2'
}, {
   id: 3,
   name: 'order 3'
}, {
   id: 4,
   name: 'order 4'
}];
load more v

Other "dynamic-component" queries related to "Dynamic component doesn't work with formarray angular"