Styjun

How to realistically deal with a shield user?

If someone else uploads my GPL'd code to Github without my permission, is that a copyright violation?

Can I enter Switzerland with only my London Driver's License?

Tile the chessboard with four-colored triominoes

What is an air conditioner compressor hard start kit and how does it work?

Purchased new computer from DELL with pre-installed Ubuntu. Won't boot. Should assume its an error from DELL?

Ancients don't give a full level?

Is charge point-like or a smear?

In MTG, was there ever a five-color deck that worked well?

Why do proponents of guns oppose gun competency tests?

Examples of hyperbolic groups

Why is Chromosome 1 called Chromosome 1?

How to touch up scratches on a black anodized aluminum flashlight?

Is the first page of a novel really that important?

Why do dragons like shiny stuff?

Repeated! Factorials!

Is space radiation a risk for space film photography, and how is this prevented?

Can attackers change the public key of certificate during the SSL handshake

How to make attic easier to traverse?

How many years before enough atoms of your body are replaced to survive the sudden disappearance of the original body’s atoms?

Only charge capacitor when button pushed then turn on LED momentarily with capacitor when button released

Premier League simulation

Will a research paper be retracted if the code (which was made publically available ) is shown have a flaw in the logic?

How to win against ants

best practice of adding a new property to a formGroup

Can't bind to 'ngModel' since it isn't a known property of 'input'Can't bind to 'formGroup' since it isn't a known property of 'form'Upgrading to @angular/forms in RC6Can't bind to 'formControl' since it isn't a known property of 'input' - angular2 material Autocomplete issueCreate a reusable FormGroupAngular 6: Can't bind to 'formGroup' since it isn't a known property of 'form'?control.setParent is not a function when dymanically creating formGroupHow to create a custom validator for FormGroupAngular FormGroup FormArray - submits only one object in array from dropdownNGRX - how to have calculated properties on items in the store

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

3

What is the right way of adding a new object property to angular formGroup?

I have this set up:

ngOnInit() 
 this.form = this.fb.group(
 // store is the formGroupname
 store: this.fb.group(
 // branch and code are formControlName
 branch: ['asdf', Validators.required],
 code: ['asdf', Validators.required],
 ),
 selector: this.createStock(),
 stock: this.fb.array([
 this.createStock(product_id: '1', quantity: 20),
 this.createStock(product_id: '2', quantity: 30),
 this.createStock(product_id: '3', quantity: 40),
 ]),
 );

And inside the store property, I want to add if a checkbox is clicked. Upon reading on the angular documentation I have this solution that is working but giving me red line on vscode. I wonder is this the right way?

Solution:

onSubmitForm() 

 // adding dynamic formgroup
 if(this.form.get('checkBoxStore').value)
 this.form.get('store').addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

Image:

It's giving me an error message but working just fine. Weird but ok.

angular angular-forms angular-formbuilder

share|improve this question

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

add a comment | 

3

What is the right way of adding a new object property to angular formGroup?

I have this set up:

ngOnInit() 
 this.form = this.fb.group(
 // store is the formGroupname
 store: this.fb.group(
 // branch and code are formControlName
 branch: ['asdf', Validators.required],
 code: ['asdf', Validators.required],
 ),
 selector: this.createStock(),
 stock: this.fb.array([
 this.createStock(product_id: '1', quantity: 20),
 this.createStock(product_id: '2', quantity: 30),
 this.createStock(product_id: '3', quantity: 40),
 ]),
 );

And inside the store property, I want to add if a checkbox is clicked. Upon reading on the angular documentation I have this solution that is working but giving me red line on vscode. I wonder is this the right way?

Solution:

onSubmitForm() 

 // adding dynamic formgroup
 if(this.form.get('checkBoxStore').value)
 this.form.get('store').addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

Image:

It's giving me an error message but working just fine. Weird but ok.

angular angular-forms angular-formbuilder

share|improve this question

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

add a comment | 

What is the right way of adding a new object property to angular formGroup?

I have this set up:

ngOnInit() 
 this.form = this.fb.group(
 // store is the formGroupname
 store: this.fb.group(
 // branch and code are formControlName
 branch: ['asdf', Validators.required],
 code: ['asdf', Validators.required],
 ),
 selector: this.createStock(),
 stock: this.fb.array([
 this.createStock(product_id: '1', quantity: 20),
 this.createStock(product_id: '2', quantity: 30),
 this.createStock(product_id: '3', quantity: 40),
 ]),
 );

And inside the store property, I want to add if a checkbox is clicked. Upon reading on the angular documentation I have this solution that is working but giving me red line on vscode. I wonder is this the right way?

Solution:

onSubmitForm() 

 // adding dynamic formgroup
 if(this.form.get('checkBoxStore').value)
 this.form.get('store').addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

Image:

It's giving me an error message but working just fine. Weird but ok.

angular angular-forms angular-formbuilder

share|improve this question

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

ngOnInit() 
 this.form = this.fb.group(
 // store is the formGroupname
 store: this.fb.group(
 // branch and code are formControlName
 branch: ['asdf', Validators.required],
 code: ['asdf', Validators.required],
 ),
 selector: this.createStock(),
 stock: this.fb.array([
 this.createStock(product_id: '1', quantity: 20),
 this.createStock(product_id: '2', quantity: 30),
 this.createStock(product_id: '3', quantity: 40),
 ]),
 );

onSubmitForm() 

 // adding dynamic formgroup
 if(this.form.get('checkBoxStore').value)
 this.form.get('store').addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

angular angular-forms angular-formbuilder

angular angular-forms angular-formbuilder

share|improve this question

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

share|improve this question

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

edited Mar 27 at 5:12

Matt Tester

2,84422 gold badges2424 silver badges3030 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

asked Mar 27 at 3:41

aRtooaRtoo

671010 bronze badges

2 Answers
2

active

oldest

votes

4

You are getting that error because FormGroup extends AbstractControl, when you are using get() it is a type of AbstractControl so to resolve this you need to cast it as a FormGroup

(this.form.get('store') as FormGroup).addControl(...)

See stackblitz

share|improve this answer

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you for the solution. this is working.
  
  – aRtoo
  Mar 27 at 15:14
  

  
  
  
  

add a comment | 

2

You can typecast the abstractformcontrol as formgroup and store its mutable instance into a variable and perform the addcontrol operation like this:

const store: FormGroup = this.form.get('store') as FormGroup;
 store.addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

share|improve this answer

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I want to add only foo control , then how?
  
  – Soumya Gangamwar
  Mar 27 at 5:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you please elaborate more? As in, you want to add "foo" formcontrol to the form or any prticular formgroup inside the form?
  
  – Sumit Vekariya
  Mar 27 at 6:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Only Foo formControl, like store.addControl('foo': '') it's throwing error
  
  – Soumya Gangamwar
  Mar 27 at 6:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can add it like this: store.addControl('foo': new FormControl(''));
  
  – Sumit Vekariya
  Mar 27 at 6:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's throwing , expected in vs code it self
  
  – Soumya Gangamwar
  Mar 27 at 7:01
  

  
  
  
  

 | 
show 3 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55369446%2fbest-practice-of-adding-a-new-property-to-a-formgroup%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

4

You are getting that error because FormGroup extends AbstractControl, when you are using get() it is a type of AbstractControl so to resolve this you need to cast it as a FormGroup

(this.form.get('store') as FormGroup).addControl(...)

See stackblitz

share|improve this answer

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you for the solution. this is working.
  
  – aRtoo
  Mar 27 at 15:14
  

  
  
  
  

add a comment | 

4

You are getting that error because FormGroup extends AbstractControl, when you are using get() it is a type of AbstractControl so to resolve this you need to cast it as a FormGroup

(this.form.get('store') as FormGroup).addControl(...)

See stackblitz

share|improve this answer

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you for the solution. this is working.
  
  – aRtoo
  Mar 27 at 15:14
  

  
  
  
  

add a comment | 

You are getting that error because FormGroup extends AbstractControl, when you are using get() it is a type of AbstractControl so to resolve this you need to cast it as a FormGroup

(this.form.get('store') as FormGroup).addControl(...)

See stackblitz

share|improve this answer

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

(this.form.get('store') as FormGroup).addControl(...)

share|improve this answer

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

answered Mar 27 at 5:06

penleychanpenleychan

3,48111 gold badge88 silver badges2222 bronze badges

2

You can typecast the abstractformcontrol as formgroup and store its mutable instance into a variable and perform the addcontrol operation like this:

const store: FormGroup = this.form.get('store') as FormGroup;
 store.addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

share|improve this answer

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I want to add only foo control , then how?
  
  – Soumya Gangamwar
  Mar 27 at 5:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you please elaborate more? As in, you want to add "foo" formcontrol to the form or any prticular formgroup inside the form?
  
  – Sumit Vekariya
  Mar 27 at 6:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Only Foo formControl, like store.addControl('foo': '') it's throwing error
  
  – Soumya Gangamwar
  Mar 27 at 6:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can add it like this: store.addControl('foo': new FormControl(''));
  
  – Sumit Vekariya
  Mar 27 at 6:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's throwing , expected in vs code it self
  
  – Soumya Gangamwar
  Mar 27 at 7:01
  

  
  
  
  

 | 
show 3 more comments

2

You can typecast the abstractformcontrol as formgroup and store its mutable instance into a variable and perform the addcontrol operation like this:

const store: FormGroup = this.form.get('store') as FormGroup;
 store.addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

share|improve this answer

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I want to add only foo control , then how?
  
  – Soumya Gangamwar
  Mar 27 at 5:35
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you please elaborate more? As in, you want to add "foo" formcontrol to the form or any prticular formgroup inside the form?
  
  – Sumit Vekariya
  Mar 27 at 6:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Only Foo formControl, like store.addControl('foo': '') it's throwing error
  
  – Soumya Gangamwar
  Mar 27 at 6:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  You can add it like this: store.addControl('foo': new FormControl(''));
  
  – Sumit Vekariya
  Mar 27 at 6:59
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  it's throwing , expected in vs code it self
  
  – Soumya Gangamwar
  Mar 27 at 7:01
  

  
  
  
  

 | 
show 3 more comments

You can typecast the abstractformcontrol as formgroup and store its mutable instance into a variable and perform the addcontrol operation like this:

const store: FormGroup = this.form.get('store') as FormGroup;
 store.addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

share|improve this answer

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges

const store: FormGroup = this.form.get('store') as FormGroup;
 store.addControl(
 'foo',
 this.fb.group(
 testingAdd: this.form.get('test').value,
 )
 );

share|improve this answer

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges

answered Mar 27 at 5:21

Sumit VekariyaSumit Vekariya

10466 bronze badges