Question

在我的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>

实时演示：https://codesandbox.io/s/wnj9nj1l55

Answer 1

您没有正确执行ngSubmit。

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

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

}

https://codesandbox.io/s/0xvky6woz0

编辑
您输入的RegEx密码无效，因此即使名称和用户名有效，密码也无效。我不知道您要查找的内容，但是类似的方法可以正常工作：/^[a-z]+/i

编辑2
并且，如果您想要一个除空格以外的所有密码，请使用/^[a-zA-Z_\-]+$/
另外，您的html文件中有一个错误：

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

Answer 2

这是工作示例，您可以尝试 https://codesandbox.io/s/lyqx80n32z

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

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

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

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

表单值在提交时无法解决，未发现错误

2 个答案: