Issue
I'm building a form with ControlGroup and I'm loading a class object in it. However I'm running into the error mentioned in the title half of the time. Some forms do load and some don't.
I have a class file like so:
export class User {
id: number;
email: string;
sign_in_count: number;
created_at: string;
first_name: string;
last_name: string;
birth_date: Date;
news_letter: boolean;
fb_id: string;
gender: boolean;
phone: string;
picture: any;
}
In my UserDetailComponent I load the class in the control like this:
export class UserDetailComponent implements OnInit {
user: User;
userDetailForm: ControlGroup;
constructor(
private form: FormBuilder,
private _userService: UserService,
private _router: Router,
private params: RouteSegment
) { }
ngOnInit() {
this.user = this._userService.getUser();
if (this.user === undefined) {
this._userService.getSingleUser(this.params.getParam('id'))
.subscribe(data => (this.user = data, this.setForm()));
} else {
this.setForm();
}
}
setForm() {
this.userDetailForm = this.form.group(this.user);
}
}
On that last line I get the error of which the stacktrace is below:
browser_adapter.ts:78 TypeError: this.validator is not a function
at Control.AbstractControl._runValidator (model.ts:146)
at Control.AbstractControl.updateValueAndValidity (model.ts:128)
at new Control (model.ts:282)
at FormBuilder.control (form_builder.ts:32)
at FormBuilder._createControl (form_builder.ts:66)
at eval (form_builder.ts:50)
at Function.StringMapWrapper.forEach (collection.ts:132)
at FormBuilder._reduceControls (form_builder.ts:49)
at FormBuilder.group (form_builder.ts:19)
at UserDetailComponent.setForm (user-detail.component.ts:95)
Solution
I had this error when I was binding an array of values in form builder the wrong way.
What I did:
fb.group({items: [1, 2, 3, 4]})
How it should be:
fb.group({items: [[1, 2, 3, 4]]})
You have to wrap everything into an array, otherwise angular thinks that [1, 2, 3, 4]
is a form control definition rather than a form control value.
Answered By - M K
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.