javascript - Angular 形式没有检测到值的变化

标签 javascript angular typescript ionic-framework

我不知道为什么表单不起作用! 输入不会更改表单中的值。

并且 valueChanges 未检测到任何内容。 有什么帮助吗?

应用于 stackblitz: https://stackblitz.com/edit/angular-ivy-w68v69?file=src/app/app.component.ts

import { Component, VERSION } from "@angular/core";
import { FormControl, FormGroup, Validators } from "@angular/forms";

@Component({
  selector: "my-app",
  template: `
    <form [formGroup]="form">
      <input
        FormControlName="patientName"
        placeholder="Enter Patient Name ..."
      />
    </form>
  `,
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      patientName: new FormControl("")
    });

    this.form.get("patientName").valueChanges.subscribe(x => console.log(x));

    this.form.valueChanges.subscribe(next => {
      console.log("valueChanges didtted");
      console.log(next);
    });

    console.log("form created");
  }
}


最佳答案

HTML 部分中的属性 FormControlName 应该包含小写的“F”:formControlName="patentName"

如果你更正这个,它就会起作用:https://stackblitz.com/edit/angular-ivy-cjntrr?file=src/app/app.component.ts

关于javascript - Angular 形式没有检测到值的变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66507116/

相关文章:

javascript - 在表单中提交时,新的 data-* HTML5/Javascript 值是否可以在 PHP 中访问

Angular 4 - 无法在 HttpErrorResponse 中获取自定义 HTTP header

angular - 从 CDK Overlay Portal 获取对组件的引用

javascript - 如何使用 VS Code (typescript) 中的一个命令删除事件文件中所有未使用的导入?

typescript - 编辑并继续使用 TypeScript?

javascript - 从 Select on change 中获取选定的值/文本

javascript - 如何运行自动播放视频并静音?

javascript - 使用对象数组等循环遍历对象数组

angular - 你如何让两个使用 flex 的表单字段占据行的 33%?

typescript - 如何在 TypeScript 中等待 Http 应答 - Angular 5