Topic: Using Multiselect with Reactive Forms and updatedOn property doesn't work
dimitribocquet pro asked 6 years ago
I use updateOn (blur) property on my Reactive Form, and the multiselect doesn't update the values. But without updateOn, it works.
Of course, I'd like to make it work with updateOn property.
Here is my code :
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="md-form">
<mdb-select ngDefaultControl [options]="optionsSelect" [multiple]="true" placeholder="Choose an option" formControlName="options"></mdb-select>
</div>
<div class="text-center">
<button class="btn btn-default waves-light" mdbWavesEffect [disabled]="form.invalid" >Submit</button>
</div>
</form>
<pre>
{{ form.value | json }}
</pre>
export class MyComponent implements OnInit {
optionsSelect = [{ value: '1', label: 'Today' },
{ value: '2', label: 'Yesterday' },
{ value: '3', label: 'Last 7 days' },
{ value: '4', label: 'Last 30 days' },
{ value: '5', label: 'Last week' },
{ value: '6', label: 'Last month' }
];
form: FormGroup;
constructor(
private _fb: FormBuilder,
) {
}
ngOnInit() {
this.initForm();
}
initForm() {
// updateOn issue : https://github.com/angular/angular/issues/19163#issuecomment-396947839
const tmpFGroup = this._fb.group({
options: [[], []],
});
// Works
this.roleModelForm = new FormGroup(tmpFGroup.controls);
// Doesn't Work
// this.roleModelForm = new FormGroup(tmpFGroup.controls, { updateOn: 'blur' });
}
onSubmit() {
console.log('submitted', this.form.value);
}
}
Add comment
Arkadiusz Idzikowski staff answered 6 years ago
Dear dimitribocquet,
Thanks for letting us know, we will take a look at this problem and try to fix it in the near future.
Best,
Arek
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Answered
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags