Показать сообщение отдельно
  #1 (permalink)  
Старый 11.12.2019, 11:28
Интересующийся
Отправить личное сообщение для shtangen Посмотреть профиль Найти все сообщения от shtangen
 
Регистрация: 21.08.2019
Сообщений: 11

ngx-monaco-editor компонент сбрасывает form.pristine
Доброго времени суток.
Столкнулся со следующего рода проблемой.

Я использую в проекте 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();
	}


Не подскажите почему не работает приведенный вариант кода, либо предложите вариант получше.

Последний раз редактировалось shtangen, 11.12.2019 в 11:30.
Ответить с цитированием