Is there a way to use a FormArray as the top level form
up vote
1
down vote
favorite
I'm using @ngular/core 6.1.1 and @angular/forms 6.1.1
I'm trying to write a ControlValueAccessor which will manage an array of values.
I'm using reactive forms and declaring my form like this:
export class ItemsFormComponent implements ControlValueAccor, OnInit {
public form: FormArray;
public items: string = ['foo', 'bar', 'baz'];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));
this.form.valueChanges
.debounceTime(200)
.subscribe((items: string) => {
this.onChangeFn(items);
});
}
}
But then, I get a Template parsing error with
<ol [formArray]="form">
...
</ol>
Can't bind to 'formArray' since it isn't a known property of 'ol'
I DID include the FormsModule and the ReactiveFormsModule in my Feature Module. Any other form based on FormGroup work.
It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway.
So is there no way to use a FormArray as the top level form? Ideally, I'd like to avoid creating a FormGroup with a single FormArray in it.
angular angular-forms
asked Nov 10 at 12:59
paztek
10116
add a comment |
up vote
1
down vote
favorite
I'm using @ngular/core 6.1.1 and @angular/forms 6.1.1
I'm trying to write a ControlValueAccessor which will manage an array of values.
I'm using reactive forms and declaring my form like this:
export class ItemsFormComponent implements ControlValueAccor, OnInit {
public form: FormArray;
public items: string = ['foo', 'bar', 'baz'];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));
this.form.valueChanges
.debounceTime(200)
.subscribe((items: string) => {
this.onChangeFn(items);
});
}
}
But then, I get a Template parsing error with
<ol [formArray]="form">
...
</ol>
Can't bind to 'formArray' since it isn't a known property of 'ol'
I DID include the FormsModule and the ReactiveFormsModule in my Feature Module. Any other form based on FormGroup work.
It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway.
So is there no way to use a FormArray as the top level form? Ideally, I'd like to avoid creating a FormGroup with a single FormArray in it.
angular angular-forms
asked Nov 10 at 12:59
paztek
10116
"It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway." Why? For me is correct
– Eliseo
Nov 10 at 13:36
OK, it builds in prod with<ol [formGroup]="form">but it still looks like a hack to me..
– paztek
Nov 10 at 13:49
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I'm using @ngular/core 6.1.1 and @angular/forms 6.1.1
I'm trying to write a ControlValueAccessor which will manage an array of values.
I'm using reactive forms and declaring my form like this:
export class ItemsFormComponent implements ControlValueAccor, OnInit {
public form: FormArray;
public items: string = ['foo', 'bar', 'baz'];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));
this.form.valueChanges
.debounceTime(200)
.subscribe((items: string) => {
this.onChangeFn(items);
});
}
}
But then, I get a Template parsing error with
<ol [formArray]="form">
...
</ol>
Can't bind to 'formArray' since it isn't a known property of 'ol'
I DID include the FormsModule and the ReactiveFormsModule in my Feature Module. Any other form based on FormGroup work.
It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway.
So is there no way to use a FormArray as the top level form? Ideally, I'd like to avoid creating a FormGroup with a single FormArray in it.
angular angular-forms
asked Nov 10 at 12:59
paztek
10116
I'm using @ngular/core 6.1.1 and @angular/forms 6.1.1
I'm trying to write a ControlValueAccessor which will manage an array of values.
I'm using reactive forms and declaring my form like this:
export class ItemsFormComponent implements ControlValueAccor, OnInit {
public form: FormArray;
public items: string = ['foo', 'bar', 'baz'];
constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.array(this.items.map((item) => new FormControl(item)));
this.form.valueChanges
.debounceTime(200)
.subscribe((items: string) => {
this.onChangeFn(items);
});
}
}
But then, I get a Template parsing error with
<ol [formArray]="form">
...
</ol>
Can't bind to 'formArray' since it isn't a known property of 'ol'
I DID include the FormsModule and the ReactiveFormsModule in my Feature Module. Any other form based on FormGroup work.
It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway.
So is there no way to use a FormArray as the top level form? Ideally, I'd like to avoid creating a FormGroup with a single FormArray in it.
angular angular-forms
angular angular-forms
asked Nov 10 at 12:59
paztek
10116
asked Nov 10 at 12:59
paztek
10116
asked Nov 10 at 12:59
paztek
10116
asked Nov 10 at 12:59
paztek
10116
asked Nov 10 at 12:59
paztek
10116
10116
"It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway." Why? For me is correct
– Eliseo
Nov 10 at 13:36
OK, it builds in prod with<ol [formGroup]="form">but it still looks like a hack to me..
– paztek
Nov 10 at 13:49
add a comment |
"It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway." Why? For me is correct
– Eliseo
Nov 10 at 13:36
OK, it builds in prod with<ol [formGroup]="form">but it still looks like a hack to me..
– paztek
Nov 10 at 13:49
"It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway." Why? For me is correct
– Eliseo
Nov 10 at 13:36
"It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway." Why? For me is correct
– Eliseo
Nov 10 at 13:36
OK, it builds in prod with
<ol [formGroup]="form"> but it still looks like a hack to me..– paztek
Nov 10 at 13:49
OK, it builds in prod with
<ol [formGroup]="form"> but it still looks like a hack to me..– paztek
Nov 10 at 13:49
add a comment |
1 Answer
1
active
oldest
votes
up vote
2
down vote
accepted
Yes you can use FormArray as the top level form,
place: FormArray = new FormArray([
new FormControl('SF'),
new FormControl('NY'),
]);
And in the template,
<div *ngFor="let c of place.controls; index as i">
<input [formControl]="c" placeholder="c">
</div>
<ng-container *ngFor="let c of place.controls">
<pre>{{this.c.value | json}}</pre>
</ng-container>
Here is the working demo on stackblitz
answered Nov 10 at 14:00
anonymous
1911115
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%2f53239189%2fis-there-a-way-to-use-a-formarray-as-the-top-level-form%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
up vote
2
down vote
accepted
Yes you can use FormArray as the top level form,
place: FormArray = new FormArray([
new FormControl('SF'),
new FormControl('NY'),
]);
And in the template,
<div *ngFor="let c of place.controls; index as i">
<input [formControl]="c" placeholder="c">
</div>
<ng-container *ngFor="let c of place.controls">
<pre>{{this.c.value | json}}</pre>
</ng-container>
Here is the working demo on stackblitz
answered Nov 10 at 14:00
anonymous
1911115
add a comment |
up vote
2
down vote
accepted
Yes you can use FormArray as the top level form,
place: FormArray = new FormArray([
new FormControl('SF'),
new FormControl('NY'),
]);
And in the template,
<div *ngFor="let c of place.controls; index as i">
<input [formControl]="c" placeholder="c">
</div>
<ng-container *ngFor="let c of place.controls">
<pre>{{this.c.value | json}}</pre>
</ng-container>
Here is the working demo on stackblitz
answered Nov 10 at 14:00
anonymous
1911115
add a comment |
up vote
2
down vote
accepted
up vote
2
down vote
accepted
Yes you can use FormArray as the top level form,
place: FormArray = new FormArray([
new FormControl('SF'),
new FormControl('NY'),
]);
And in the template,
<div *ngFor="let c of place.controls; index as i">
<input [formControl]="c" placeholder="c">
</div>
<ng-container *ngFor="let c of place.controls">
<pre>{{this.c.value | json}}</pre>
</ng-container>
Here is the working demo on stackblitz
answered Nov 10 at 14:00
anonymous
1911115
Yes you can use FormArray as the top level form,
place: FormArray = new FormArray([
new FormControl('SF'),
new FormControl('NY'),
]);
And in the template,
<div *ngFor="let c of place.controls; index as i">
<input [formControl]="c" placeholder="c">
</div>
<ng-container *ngFor="let c of place.controls">
<pre>{{this.c.value | json}}</pre>
</ng-container>
Here is the working demo on stackblitz
answered Nov 10 at 14:00
anonymous
1911115
answered Nov 10 at 14:00
anonymous
1911115
answered Nov 10 at 14:00
anonymous
1911115
answered Nov 10 at 14:00
anonymous
1911115
1911115
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53239189%2fis-there-a-way-to-use-a-formarray-as-the-top-level-form%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
"It kinda works if I do <ol [formGroup]="form"> but it seems like a weird hack and the validation seems broken. And I'm afraid it will break when building for prod anyway." Why? For me is correct
– Eliseo
Nov 10 at 13:36
OK, it builds in prod with
<ol [formGroup]="form">but it still looks like a hack to me..– paztek
Nov 10 at 13:49