错误：支持使用带有反应式表单指令的 ngModel 输入属性和 ngModelChange 事件已被弃用

Question

我收到此错误： 您似乎在与 formControlName 相同的表单字段上使用 ngModel。 支持使用 ngModel 输入属性和 ngModelChange 事件 Angular v6 中已弃用反应式表单指令并将被删除 在 Angular v7 中。

我尝试通过删除“[(ngModel)]="value"" 来纠正此问题，但这不起作用 - 从下拉列表中选择项目时，不会保留该值。

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 ??