Pushing new FormGroup into FormArray marks dynamic FormGroup as invalid
I'm not sure if this is a bug, almost 90% certain it's not, but I want to know the logic behind something like this occuring.
I have a component, where let's say I'm initializing a FormGroup on the initialization of the component.
export class FooComponent implements OnInit {
form!: FormGroup;
foos!: FormArray;
constructor(
private fb: FormBuilder
) {}
ngOnInit(): void {
this.form = this.fb.group({
foos: this.fb.array(),
});
}
createFoo(): FormGroup {
return this.fb.group({
name: ['', Validators.required],
details: ['', Validators.required]
});
}
addFoo(): void {
this.foos = this.form.get('foos') as FormArray;
this.foos.push(this.createFoo());
}
}
Let's say the addFoo() function gets called on a button click (which is how it is in my current application). Why is the newly pushed FormGroup marked as pristine but invalid? Even if there is a solid reason for this, shouldn't one assume that if we're dynamically generating a new FormGroup with validators, it should be considered valid upon creation or push? Is there a way around this? I don't want to have my users click a button to generate a new group of fields to fill out that are already marked invalid when they haven't done anything to those fields themselves. Is this a bug? I don't feel like my implementation is incorrect since I've followed the Angular Material documentation for this. I've tried setting the Validators.required manually after the new foo is pushed into the FormArray but this yields the same result.
Any opinions and/or tips?
javascript angular angular-material angular6 angular-material-6
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
add a comment |
I'm not sure if this is a bug, almost 90% certain it's not, but I want to know the logic behind something like this occuring.
I have a component, where let's say I'm initializing a FormGroup on the initialization of the component.
export class FooComponent implements OnInit {
form!: FormGroup;
foos!: FormArray;
constructor(
private fb: FormBuilder
) {}
ngOnInit(): void {
this.form = this.fb.group({
foos: this.fb.array(),
});
}
createFoo(): FormGroup {
return this.fb.group({
name: ['', Validators.required],
details: ['', Validators.required]
});
}
addFoo(): void {
this.foos = this.form.get('foos') as FormArray;
this.foos.push(this.createFoo());
}
}
Let's say the addFoo() function gets called on a button click (which is how it is in my current application). Why is the newly pushed FormGroup marked as pristine but invalid? Even if there is a solid reason for this, shouldn't one assume that if we're dynamically generating a new FormGroup with validators, it should be considered valid upon creation or push? Is there a way around this? I don't want to have my users click a button to generate a new group of fields to fill out that are already marked invalid when they haven't done anything to those fields themselves. Is this a bug? I don't feel like my implementation is incorrect since I've followed the Angular Material documentation for this. I've tried setting the Validators.required manually after the new foo is pushed into the FormArray but this yields the same result.
Any opinions and/or tips?
javascript angular angular-material angular6 angular-material-6
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
add a comment |
I'm not sure if this is a bug, almost 90% certain it's not, but I want to know the logic behind something like this occuring.
I have a component, where let's say I'm initializing a FormGroup on the initialization of the component.
export class FooComponent implements OnInit {
form!: FormGroup;
foos!: FormArray;
constructor(
private fb: FormBuilder
) {}
ngOnInit(): void {
this.form = this.fb.group({
foos: this.fb.array(),
});
}
createFoo(): FormGroup {
return this.fb.group({
name: ['', Validators.required],
details: ['', Validators.required]
});
}
addFoo(): void {
this.foos = this.form.get('foos') as FormArray;
this.foos.push(this.createFoo());
}
}
Let's say the addFoo() function gets called on a button click (which is how it is in my current application). Why is the newly pushed FormGroup marked as pristine but invalid? Even if there is a solid reason for this, shouldn't one assume that if we're dynamically generating a new FormGroup with validators, it should be considered valid upon creation or push? Is there a way around this? I don't want to have my users click a button to generate a new group of fields to fill out that are already marked invalid when they haven't done anything to those fields themselves. Is this a bug? I don't feel like my implementation is incorrect since I've followed the Angular Material documentation for this. I've tried setting the Validators.required manually after the new foo is pushed into the FormArray but this yields the same result.
Any opinions and/or tips?
javascript angular angular-material angular6 angular-material-6
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
I'm not sure if this is a bug, almost 90% certain it's not, but I want to know the logic behind something like this occuring.
I have a component, where let's say I'm initializing a FormGroup on the initialization of the component.
export class FooComponent implements OnInit {
form!: FormGroup;
foos!: FormArray;
constructor(
private fb: FormBuilder
) {}
ngOnInit(): void {
this.form = this.fb.group({
foos: this.fb.array(),
});
}
createFoo(): FormGroup {
return this.fb.group({
name: ['', Validators.required],
details: ['', Validators.required]
});
}
addFoo(): void {
this.foos = this.form.get('foos') as FormArray;
this.foos.push(this.createFoo());
}
}
Let's say the addFoo() function gets called on a button click (which is how it is in my current application). Why is the newly pushed FormGroup marked as pristine but invalid? Even if there is a solid reason for this, shouldn't one assume that if we're dynamically generating a new FormGroup with validators, it should be considered valid upon creation or push? Is there a way around this? I don't want to have my users click a button to generate a new group of fields to fill out that are already marked invalid when they haven't done anything to those fields themselves. Is this a bug? I don't feel like my implementation is incorrect since I've followed the Angular Material documentation for this. I've tried setting the Validators.required manually after the new foo is pushed into the FormArray but this yields the same result.
Any opinions and/or tips?
javascript angular angular-material angular6 angular-material-6
javascript angular angular-material angular6 angular-material-6
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
edited Nov 19 '18 at 8:31
Daniel Park
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
asked Nov 19 '18 at 7:38
Daniel ParkDaniel Park
196314
196314
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
For you question here is an answer.
On initial state your this.form is valid
then createFoo() creates a formGroup which is invalid due empty value provided with required validator.
When you try to push invalid formGroup to a valid formGroup Array then this.form get invalid.
If you want valid on push try to add value or remove the required validator
For REF:
FormBuilder creates the Group with formControl like this
new FormControl(value: any, validator: Validators);
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
add a comment |
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370203%2fpushing-new-formgroup-into-formarray-marks-dynamic-formgroup-as-invalid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
For you question here is an answer.
On initial state your this.form is valid
then createFoo() creates a formGroup which is invalid due empty value provided with required validator.
When you try to push invalid formGroup to a valid formGroup Array then this.form get invalid.
If you want valid on push try to add value or remove the required validator
For REF:
FormBuilder creates the Group with formControl like this
new FormControl(value: any, validator: Validators);
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
add a comment |
For you question here is an answer.
On initial state your this.form is valid
then createFoo() creates a formGroup which is invalid due empty value provided with required validator.
When you try to push invalid formGroup to a valid formGroup Array then this.form get invalid.
If you want valid on push try to add value or remove the required validator
For REF:
FormBuilder creates the Group with formControl like this
new FormControl(value: any, validator: Validators);
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
add a comment |
For you question here is an answer.
On initial state your this.form is valid
then createFoo() creates a formGroup which is invalid due empty value provided with required validator.
When you try to push invalid formGroup to a valid formGroup Array then this.form get invalid.
If you want valid on push try to add value or remove the required validator
For REF:
FormBuilder creates the Group with formControl like this
new FormControl(value: any, validator: Validators);
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
For you question here is an answer.
On initial state your this.form is valid
then createFoo() creates a formGroup which is invalid due empty value provided with required validator.
When you try to push invalid formGroup to a valid formGroup Array then this.form get invalid.
If you want valid on push try to add value or remove the required validator
For REF:
FormBuilder creates the Group with formControl like this
new FormControl(value: any, validator: Validators);
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
answered Nov 19 '18 at 9:36
Sheik AlthafSheik Althaf
27717
27717
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
add a comment |
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
This wasn't the exact answer I was looking for but helped me get to a solution. I'll mark it as correct.
– Daniel Park
Dec 20 '18 at 22:31
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370203%2fpushing-new-formgroup-into-formarray-marks-dynamic-formgroup-as-invalid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
