ng-dirty class gets added when i change my custom component value programmatically

[kumaresan-subramani]

I'm submitting a...

Bug report

If i change value of my custom component programmatically ng-dirty class gets added but it is not the behavior. here i have added my stackblitz sample [ https://stackblitz.com/edit/angular-5gjp4o?file=src/app/app.component.html ]

Current behavior

-ng-dirty class gets adding

Expected behavior

-ng-dirty will not be added

Minimal reproduction of the problem with instructions

stackblitz sample [ https://stackblitz.com/edit/angular-5gjp4o?file=src/app/app.component.html ]

1.open this sample
2.run and then click button whichis appended to the sample then you will see the dirty class getting added

What is the motivation / use case for changing the behavior?

it doesn't match to behavior

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[trotyl]

It's the problem of your library, please report the issue there.

[kumaresan-subramani]

no.... if i use any custom component, this error comes

[pkozlowski-opensource]

@kumaresan-subramani please provide a minimal reproduce scenario without any 3rd-party dependencies - we need to have angular-only stackblitz to be able to confirm an issue in the framework.

[kumaresan-subramani]

OKay @pkozlowski-opensource

[trotyl]

@kumaresan-subramani Any form control is powered by ControlValueAccessor, there's no difference in built-in or custom ControlValueAccessors, all of them are just normal library code.

[kumaresan-subramani]

@trotyl ,

okay, now i can understand.

This is my library code, how can i make my component to pristine state when programmaticaly value changed, please prvide any idea?

`import { getValue, setValue, isNullOrUndefined } from '@syncfusion/ej2-base';
/**

• Angular Form Base Module
  /
  var FormBase = /* @Class */ (function () {
  function FormBase() {
  }
  FormBase.prototype.propagateChange = function (_) { return; };
  FormBase.prototype.propagateTouch = function () { return; };

I tried like this
// FormBase.prototype.ngOnInit = function () {
// var self = this;
// var origFunc = this.control.markAsPristine;
// this.control.markAsPristine = function () {
// origFunc.apply(this, arguments);
// console.log('Marked as pristine!');
// };
// };
end
FormBase.prototype.localChange = function (e) {
var value = (e.checked === undefined ? e.value : e.checked);
if (this.propagateChange !== undefined && value !== undefined) {
// Update angular from our control
this.propagateChange(value);
}
};
FormBase.prototype.registerOnChange = function (registerFunction) {
this.propagateChange = registerFunction;
};
FormBase.prototype.registerOnTouched = function (registerFunction) {
this.propagateTouch = registerFunction;
};
FormBase.prototype.twoWaySetter = function (newVal, prop) {
var oldVal = getValue(prop, this.properties);
var ele = this.inputElement || this.element;
if (oldVal === newVal &&
(ele.value === undefined || ele.value === '')) {
return;
}
this.saveChanges(prop, newVal, oldVal);
setValue(prop, (isNullOrUndefined(newVal) ? null : newVal), this.properties);
getValue(prop + 'Change', this).emit(newVal);
};
FormBase.prototype.ngAfterViewInit = function () {
var _this = this;
// Used setTimeout for template binding
// Refer Link: #6005
setTimeout(function () {
/* istanbul ignore else /
if (typeof window !== 'undefined') {
_this.appendTo(_this.element);
var ele = _this.inputElement || _this.element;
ele.addEventListener('focus', _this.ngOnFocus.bind(_this));
ele.addEventListener('blur', _this.ngOnBlur.bind(_this));
}
});
};
FormBase.prototype.setDisabledState = function (disabled) {
this.enabled = !disabled;
};
FormBase.prototype.writeValue = function (value) {
//update control value from angular
if (this.checked === undefined) {
this.value = value;
}
else {
if (typeof value === 'boolean') {
this.checked = value;
}
else {
this.checked = value === this.value;
}
}
if (value === null) {
return;
}
};
FormBase.prototype.ngOnFocus = function (e) {
/ istanbul ignore else /
if (this.skipFromEvent !== true) {
this.focus.emit(e);
}
};
FormBase.prototype.ngOnBlur = function (e) {
this.propagateTouch();
/ istanbul ignore else */
if (this.skipFromEvent !== true) {
this.blur.emit(e);
}
};
return FormBase;
}());
export { FormBase };
`

i have tried like above but "control : Abstractcontrol" is undefined here i can not be able to call "MarkAsPristine()" methoad

[kumaresan-subramani]

And more thing can you please tell me, where you are generating angular components like if i render input tag , angular will convert it into .
can you please tell where you are converting this [i mean which file? ]

[IgorMinar]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}