5

I ran into a issue using Angular 2 ngModel binding. plnkr

If I use ngModel to bind a value to a child component, the value is not populated on the OnInit function of the child component. So If I bind to a property call "boundName" and I try to access that in the OnInit, it will be null. However if I bind the to the same value in the parent control not using ngModel but a input parameter, the value is accessible in the OnInit function.

So.. if my parent component creates a child component like

 <my-boundcomp [(ngModel)]="name" [(inputName)] ="name" ></my-boundcomp>

And my child components onInit Function is

public ngOnInit() {
   console.log("Input Name :" + this.inputName);
   console.log("Bound Name :" + this.boundName);
   this._boundNameOnInit = this.boundName; // <--- Going to be null
   this._inputNameOnInit = this.inputName; // <--- Going to be not null

}

I found this behavior to be odd, and unexpected. I'm not sure if this is a bug or I am not using the FormsModule ngModel correctly, but interesting enough that I thought I should share.

Here is the full plnkr https://plnkr.co/edit/Im5oz7q1HhG5MgGTTZ1R?p=preview

1

This code

[(ngModel)]="name"

sets the value of NgModel in OnInit not of BoundValueComponent. When BoundValueComponent.writeValue is called from NgModel, then boundName is set.

I'm pretty sure this is as designed.

|improve this answer|||||
  • If that were the case, then would I access ngmodel in the oninit to get the value? that give me the same result (plnkr.co/edit/POWoAgw8kYJToPhJwWQw?p=preview) . – Jon Z Oct 3 '16 at 16:52
  • I don't think you can influence that. You can add an @Input() ngModel; to your component but that probably has other unwanted side effects. – Günter Zöchbauer Oct 3 '16 at 16:54
  • 1
    I agree.. My point is, I still think there is something not quite right here. I'm not convinced this is working as designed yet, Why should you not have access to the incoming value in the OnInit. – Jon Z Oct 3 '16 at 17:05
  • ngOnChanges() is called when inputs are updated. ngOnInit() is called after ngOnChanges() was called the first time. writeValue is not related at all to ngOnInit() at all. – Günter Zöchbauer Oct 3 '16 at 17:06
  • 1
    ngOnInit() is called and the value is set just fine, but in the NgModel directive, not on your component because ngModel is not an input of your component, but an input of NgModel. There is just no reason at all why writeValue should have been called in your component. It's not related to ngOnInit(). – Günter Zöchbauer Oct 3 '16 at 17:18
1

I believe this is a "problem" if you are dependent on the value that is set via writeValue when using the ControlValueAccessor. Since boundName is set and ngOnInit is one of the first things fired, the writeValue has not had a chance to run yet.

I tried adding this on some other lifecycle hooks (AfterViewInit, AfterContentInit) and it is still too early. In fact if you default your boundName to '' or something you will notice that in AfterViewInit or AfterContentInit, it is actually nulled out before the writeValue is called.

For this reason, I would suggest setting your value in the writeValue method. If you need it to be set only once, you can use a flag. See your code below...

export class BoundValueComponent  implements OnInit, ControlValueAccessor {

@Input() inputName: string;
boundName: string;

private _boundNameOnInit : string;
private _inputNameOnInit : string;

private initialized: boolean = false;

private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;

constructor() {
}

public ngOnInit() {
   console.log("Input Name :" + this.inputName);
   console.log("Bound Name :" + this.boundName);
  // this._boundNameOnInit = this.boundName; // <--- Going to be null
   this._inputNameOnInit = this.inputName; // <--- Going to be not null
}

get value(): any {
  return this.boundName;
};

/**
* Set accessor including call the onchange callback.
*/
set value(v: any) {
  if (v !== this.boundName) {
     this.boundName = v;
     this.onChangeCallback(v);
  }
}

/**
* From ControlValueAccessor interface.
*/
writeValue(value: any) {
 this.boundName = value;

 if (!this.initialized) {
   this._boundNameOnInit = this.boundName;
   this.initialized = true;
 }
}
.......
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.