如何使用 [ngModelOptions]="{standalone: true }" 检测模板驱动的表单更改

Question

我正在尝试检测模板驱动表单中的更改，但它会抛出错误，因为 NgModel 未使用独立属性。

添加时忽略值变化

        this.ngForm.form.valueChanges.subscribe((x) => {
      debugger
            if (
                x.selectedProject &&
                x.selectedProject !== this.wizardService.selectedProject
            ) {
                debugger;
                console.log(true);
            }
        })
    ```

it is not going throw the function above but when removing the standalone flag it works but I get the Ngmodel form error

Answer 1

试试这个：

<form>
  <input
    type="text"
    [(ngModel)]="selectedProject"
    ngModelOptions="{ standalone: true }"
    #selectedProjectInput="ngModel"
  />
</form>

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  selectedProject = new FormControl('');

  constructor() {}

  ngOnInit() {
    this.selectedProject.valueChanges.subscribe((x) => {
      console.log(x);
    });
  }
}