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

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

现在您可以使用值属性来获取值或通过将新值分配给属性来更新表单控件值。

demo

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

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

angular

angular-reactive-forms

angular-template-form