I have a problem with the default value of an Angular 2 Form (formbuilder): My default values are observables (which I'm retrieving from a server), so I can't implement them like this:
export class UserComponent implements OnInit{
userForm: ControlGroup;
userData: any; // Initialise the observable var
ngOnInit():any {
this.userData = this._dataService.getAllData() // My Observable
.subscribe(
data => {
this.userData = data;
}
);
this.userForm = this._formBuilder.group({
// below the default value
'username': [this.userData.username, Validators.compose([
this.usernameValid
])]
}
Someone an idea what I need to change? Because the form displays nothing inside the input fields...
I would try this because the data are loaded asynchronously. So you need to update the value of form elements when the response is there / received.
ngOnInit():any {
this.userData = this._dataService.getAllData()
.subscribe(
data => {
this.userData = data;
this.userForm.controls.username.updateValue(
this.userData.username);
}
);
this.userForm = this._formBuilder.group({
'username': [this.userData.username, Validators.compose([
this.usernameValid
])];
}
You should also be able to do this:
data: Observable<any>;
ngOnInit():any {
this.data = this._dataService.getAllData();
this.data
.map((data) => {
return this._formBuilder.group({
username: [ this.data.username,
Validators.compose([this.usernameValid])
]
})
.subscribe((userForm) => {
this.userForm = userForm
})
}
Then in your template use the async pipe as so:
<form *ngIf="data | async" [formGroup]="userForm">
//...//
</form>
This way there is no need to call updateValue()
and it makes things a bit easier to maintain if you have a lot of different fields which all needs their default values set from observables.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With