角度形式无法正确绑定功能

Question

我尝试制作这个小表单并打算在提交时调用函数，但它甚至不会调用启动 console.log。

值得注意的是，没有记录任何内容，没有插入 console.logs，也没有记录浏览器控制台错误，在 DOM 上，表单元素显示时没有 onSubmit 属性。我尝试使用两个具有不同提交方法的函数，但都不起作用。这是根组件的子组件，根组件除了导入之外没有其他任何东西。

这是html `

<div class="container">
    <form [formGroup]="users" (ngSubmit)="onSubmit()" (submit)="logEvent($event)" >
        <input type="text" formControlName="user" id="user" style="display: block;">
        <input type="text" formControlName="pword" id="pword" style="display: block;">
        <input type="text" formControlName="nombre" id="nombre" style="display: block;">
        <input type="text" formControlName="rol" id="rol" style="display: block;">
        <button type="submit">submit</button>
    </form>
</div>

这是 component.ts 文件

@Component({
  selector: 'app-create-user',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, FormsModule],
  templateUrl: './create-user.component.html',
  styleUrls: ['./create-user.component.css']
})
export class CreateUserComponent implements OnInit{
  users;

  constructor( private userService: UserService, private fb: FormBuilder ) {
    this.users = this.fb.group({
      user:'',
      pword:'',
      nombre:'',
      rol:'',
    });


  }

  async onSubmit(): Promise<void> {
    
    console.log('on submit called')
    console.log(this.users.value);
    if (this.users.valid) {
      console.log('valid form');
    }
  };

  ngOnInit(): void {
    //console.log(this.users);
}

  logEvent(event: Event) {
    console.log('log event', event);
  }
}

Answer 1

处理

FormGroup

时，请务必确保已对其进行初始化，否则您将收到控制台错误，并且表单将无法正确初始化。

您可以在

ngOnInit

、

constructor

或其他挂钩中使用适当的值重新初始化它。但必须定义初始值。

...
export class CreateUserComponent implements OnInit{
  users = new FormGroup({}); // <- changed here!