Доброго времени суток.
Столкнулся со следующего рода проблемой.
Я использую в проекте
ngx-monaco-editor и присоединяю его к компоненту редактора в качестве FormControl-a в реактивной форме.
Потом в onInit я загружаю данные и выставляю значения formControl-лов Я ожидал бы, что форма теперь будет нетронутой pristine: true, хотя на самом деле она помечена как
pristine: false.
Pristin-ом она становится из за компонента monaco, который после загрузки данных из форм-контрола сбрасывает это свойство.
Даже сделав попытку пометить форму как
pristine ничего не получилось, т.к. monaco работает асинхронно.
Есть дурацкий вариант поместить markAsPristine в функцию setTimeout, но это как-то костыльно.
На Гитлабе есть один opened issue с такой же проблемой.
https://github.com/atularen/ngx-mona...tor/issues/101
Но он у меня не заработал. Событий изменений содержимого компонента он не отлавливает.
<div>
<ngx-monaco-editor
#editorComponent
[options]="editorOptions"
formControlName="template"
(onInit)="initMonaco($event)"
></ngx-monaco-editor>
</div>
export class PostTemplateEditComponent implements ControlValueAccessor {
componentForm: FormGroup;
componentData: PostTemplate;
currId: string;
@ViewChild(EditorComponent, { static: false }) editorComponent: EditorComponent;
private _justSetValue: any;
private _onChange: any;
registerOnChange (fn: any): void {
this._onChange = fn;
this.editorComponent.registerOnChange((val: any) => {
// skip value if it is the just set value. relevant values are strings and `null`, so `===` is ok.
console.log("catch");
if(this._justSetValue === val) {
this._justSetValue = undefined;
return;
}
fn(val);
});
}
registerOnTouched (fn: any): void {
this.editorComponent.registerOnTouched(fn);
}
writeValue (val: any): void {
if(this._onChange) {
this._onChange(val);
this._justSetValue = val;
}
this.editorComponent.writeValue(val);
}
editorOptions = {
automaticLayout: true,
theme: 'vs-light',
language: 'handlebars',
minimap: {
enabled: false
}
};
}
initMonaco(monacoEditor: any) {
this.componentForm.controls.template.markAsPristine();
// не помогает
}
initState() {
this.componentForm = new FormGroup({
code: new FormControl(""),
name: new FormControl(""),
template: new FormControl(""),
is_active: new FormControl(null),
date_create: new FormControl({ value: "", disabled: true }),
date_modify: new FormControl({ value: "", disabled: true }),
});
}
ngOnInit() {
this.initState();
this.dataService.getItem<PostTemplate>(this.currId)
.subscribe((data: PostTemplate) => {
this.componentData = new PostTemplate(data);
this.componentForm.patchValue({
code: data.code,
name: data.name,
is_active: data.is_active,
template: data.template,
date_create: data.date_create,
date_modify: data.date_modify,
});
this.isReady = true;
});
} else {
this.isReady = true;
}
this.$formSubscr = this.componentForm.valueChanges
.subscribe(value => {
this.applyFormValues(value);
}
);
this.componentForm.markAsPristine();
}
Не подскажите почему не работает приведенный вариант кода, либо предложите вариант получше.
