I am utilizing custom component fields in my project.
Initially, everything works smoothly until I attempt to replace the model with a different one.
Unfortunately, the component for each field does not get updated with the new value.
No events seem to trigger either.
This is how I am trying to change the model:
this.model = this.data.model[this.currentRow];
The HTML Formly tag used:
<form class="formly" role="form" [formGroup]="form" >
<formly-form #formly [(model)]="model" [fields]="fields" [form]="form" [options]="options">
</formly-form>
</form>
</div>
In app.model.ts file:
FormlyModule.forRoot({
types: [
{ name: 'customTextNumeric', component: VerticalNumericEditorComponent},
{ name: 'customDatepicker', component: VerticalDatePickerComponent },
{ name: 'customSelect', component: VerticalSelectComponent },
.
. .
An example of my custom component code:
import { Component, OnInit, Input, ViewChild, SimpleChanges } from '@angular/core';
import { FieldType } from '@ngx-formly/core';
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { SearchLabelService } from '../../tableHandle/search-label.service';
/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
@Component({
selector: 'app-vertical-numeric-editor',
templateUrl: './vertical-numeric-editor.component.html',
styleUrls: ['./vertical-numeric-editor.component.css']
})
export class VerticalNumericEditorComponent extends FieldType {
private validates = [];
private initialValue;
private value;
private validateValues = { required: false, minLen: 0, maxLen: 99999999, pattern: '' };
constructor(private labelSearch: SearchLabelService) {
super();
this.numericFormControl = new FormControl('', this.validates);
console.log('constructor field:');
}
numericFormControl: FormControl;
onInit() {
console.log('oninit');
}
matcher = new MyErrorStateMatcher();
ngOnInit() {
}
OnChanges(e) {
console.log('on changes');
}
ngDoCheck() {
}
ngOnDestroy() {
}
get type() {
return this.to.type || 'text';
}
}
Does anyone have any suggestions on how to update the component with the new value?