Error: Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated

Question

I received this error: It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

I tried to rectify this by removing "[(ngModel)]="value"" but this did not work - when an item is selected from the dropdown, the value is not retained.

dropdown.component.html

<form [formGroup]="myForm" class="form-style">
    <input
      #agInput
      id="input-dropdown"
      [list-formatter]="autocompleListFormatter"
      ngui-auto-complete
      type="text"
      class="form-control"
      formControlName="gridDropdown"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      placeholder=" Search"
      [(ngModel)]="value"
      autocomplete="off"
    />
</form>

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;
  @ViewChild('agInput', { static: true }) public elm: ElementRef;

  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public value: String;
  public oldValue: String;
  public selected: Boolean;
  public params: ICellEditorParams;

  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

  isPopup(): boolean {
    return false;
  }
  refresh(params: ICellEditorParams) {
    params;
    this.params.api.refreshCells();
    return true;
  }

  getValue(): String {
    if (this.value === '') {
      this.value = this.oldValue;
    }
    console.log('getValue', this.value);
    return this.value;
  }

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }

  ngOnInit() {
    this.myForm = this.builder.group({
      gridDropdown: ''
    });
  }

  // dropdown
  autocompleListFormatter = (data: any) => {
    let html = `<span>${data.name}</span>`;
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };

  setFocus() {
    this.elm.nativeElement.focus();
  }

  ngAfterViewInit() {
    Promise.resolve().then(() => this.setFocus());
  }
}

STACKBLITZ

I sooooooo love that message :) Using ngModel together with reactive form has been so misused. You should choose to go either with ngModel or reactive forms. Don't use both. You now have two different bindings "fighting" eachother. — AJT82
@AJT82 totally agreed 👍 ,mixing these two together is very hard to handle later I 'm very happy the did this — malbarmavi

malbarmavi malbarmavi · Accepted Answer · 2019-09-26T12:25:55

I 'm not a big fan of using reactive form with template form , so if you want a reference to the formControl value you can use form object this.form.get('control Name').value,but this can be simplified by creating getter and setter property ,check the example

  constructor(fb:FormBuilder) { 
    this.form = fb.group({ //  👈 setup the form 
      userName:''
    })
  }

  set value (val) { 
    this.form.get('userName').setValue(val);
  }
  get value () {
    return this.form.get('userName').value
  }

  updateUserName(){
    this.value = 'updated!!!! 🍉🍉'
  }

now you can user the value property to get the value or update the form control value by assign new value to the property.

demo 🚀🚀

Error: Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated

1 Answers