Ошибка: поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела

Question

Я получил эту ошибку: Похоже, вы используете ngModel в том же поле формы, что и formControlName.Поддержка использования свойства ввода ngModel и события ngModelChange с директивами реактивной формы устарела в Angular v6 и будет удалена в Angular v7.

Я попытался исправить это, удалив "[(ngModel)]= "значение" ", но это не сработало - при выборе элемента из раскрывающегося списка значение не сохраняется.

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

Answer 1

Я не большой поклонник использования реактивной формы с шаблоном формы, поэтому, если вам нужна ссылка на значение formControl, вы можете использовать объект формы this.form.get('control Name').value, но это можно упростить, создав свойство getter и setter, проверьтеВ примере

  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!!!! ??'
  }

теперь вы можете использовать свойство value для получения значения или обновить значение элемента управления формы, назначив новое значение свойству.

demo ??