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

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 '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 🚀🚀