Angular 表单值在提交时未显示，未发现错误

在我的

ngForm中

一切正常。但我无法在提交时获取控制台值。有人能帮我了解这个问题吗

我的ts文件：

import { Component } from "@angular/core";
import { NgForm } from "@angular/forms";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  selectedUser = {
    name: "",
    username: "",
    password: ""
  };

  patternName = /^[a-zA-Z ]{3,}$/;
  patternUsername = /^[a-z]{3,}$/;
  patternPassword = /\s/;

  constructor() {}

  ngOnInit() {}

  onSubmit(form: NgForm) {
    console.log("submitted", form.value);
  }
}

html是：

<form
  class="form-horizontal"
  #formSignin="ngForm"
  (ngSubmit)="formSignin.valid && onSubmit(formSignin)"
>
  <div class="page-header"><h2>User Sign-in</h2></div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="name">Name</label>
    <input
      type="text"
      class="col-sm-4"
      #name="ngModel"
      name="name"
      id="name"
      placeholder="Enter Name"
      [(ngModel)]="selectedUser.name"
      required
      [pattern]="patternName"
    />
    <div *ngIf="formSignin.submitted && !name.valid">
      <span *ngIf="name.errors.required">Name must to be filled</span>
    </div>
    <div *ngIf="name.errors?.pattern">
      Username should be min 3 charactors and alphabets only
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="username">User Name</label>
    <input
      type="text"
      class="col-sm-4"
      #username="ngModel"
      name="username"
      id="username"
      placeholder="Enter Username"
      [(ngModel)]="selectedUser.username"
      required
    />
    <div *ngIf="formSignin.submitted && !username.valid">
      <span *ngIf="username.errors.required">Username Must filled</span>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="password">Password</label>

    <input
      type="password"
      class="col-sm-4"
      #password="ngModel"
      name="password"
      [pattern]="patternPassword"
      id="password"
      placeholder="Enter Password"
      [(ngModel)]="selectedUser.password"
      required
    />

    <div *ngIf="formSignin.submitted && !password.valid">
      <span *ngIf="password.errors.required">Password required</span>
    </div>
    <div *ngIf="!password.errors?.required && !password.errors?.pattern">
      Space not allowed
    </div>
  </div>
  <div class="form-group d-flex">
    <label class="col-sm-2"></label>
    <div><button type="submit" class="btn btn-default">Submit</button></div>
  </div>
</form>

用户登录
名称
姓名必须填写
用户名至少应为3个字符和字母
用户名
用户名必须填写
暗语
需要密码
空间不允许
提交

---

现场演示：

您没有正确提交ngSubmit

正确的方法是只分配一个函数，并在函数中检查表单是否有效

onSubmit(form: NgForm) {
if (form.valid) {
  console.log("submitted", form.value);
} else {
  console.log("form not valid !");
}

}

编辑
密码的正则表达式无效，因此即使名称和用户名有效，密码也无效。。我不知道你在找什么，但类似的东西可以用：

/^[a-z]+//I

编辑2
如果你想要一个除了空格以外的密码：

/^[a-zA-Z\-]+$/

此外，您的html文件中有一个错误：

 <div *ngIf="!password.errors?.required && password.errors?.pattern">
  Space not allowed
</div>

空间不允许

这是一个工作示例，您可以尝试一下

这里我使用了密码模式，它不允许您在密码字段中输入空格

patternPassword=/^\S{0,50}$/

并修改了您的错误消息条件

 <div *ngIf="!password.errors?.required && password.errors?.pattern">
  Space not allowed
</div>

空间不允许

我的问题是，当表单正确时，我不会收到一个“已提交”的单词-我会在3gwebtrain编辑我的答案以及代码沙盒，现在，它工作了！你们的代码和验证条件都是正确的，唯一的问题是密码模式不起作用，你们能解释一下为什么你们需要它吗pattern@Soumya我正在寻找防止“空”的密码空间