Question

我们正在尝试使用反应式表单验证来验证表单。似乎在控制台上不起作用，它表明错误找不到带有电子邮件名称的控件，也找不到带有pwd名称的控件。这是一种简单的登录形式。这是代码：

    <form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text"
       id="email"
      formControlName="email"
    >
    <span
      *ngIf="!customerSigninForm.get('customerData.email').valid && customerSigninForm.get('customerData.email').touched"
      class="help-block">Please enter a valid email!</span>
        </div>
        <div class="form-group">
            <input class="form-control form-control-lg" placeholder="Password" type="password"
            formControlName="pwd"   
            >
             <span
      *ngIf="!customerSigninForm.get('customerData.pwd').valid && customerSigninForm.get('customerData.pwd').touched"
      class="help-block">Please enter a valid password!</span>
        </div>
        <div class="form-group">
            <div class="extra-btns align-items-center">
             <button class="btn btn-link ">Forget Password</button>
             <button class="btn btn-link ">Forget Password</button>
         </div>
         <div>
            <button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
         </div>
    </div>
    </form>

这也是打字稿

import { Component, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-customer-signin',
  templateUrl: './customer-signin.component.html',
  styleUrls: ['./customer-signin.component.css']
})
export class CustomerSigninComponent implements OnInit {

  genders = ['male', 'female'];
  customerSigninForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.customerSigninForm = new FormGroup({
      'customerData': new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
        ])

      }),
     });

  }

  onSubmit() {
   this.customerSigninForm.reset();
  }
}

当然，响应式表单模块包含在应用程序模块中：）在浏览器上，除了这些控制台错误外，如果您键入内容或单击按钮，验证程序也将无法工作，根本没有任何消息。只是那些控制台错误和以前的简单UI。如何解决？怎么了？

Answer 1

onSubmit()应该不在ngOnInit(){}中试试这个：

ngOnInit() {
   this.customerSigninForm = new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}'),
        ]);
     });
}

onSubmit() {
    console.log(this.customerSigninForm);
    this.customerSigninForm.reset();
}

Answer 2

您在customerData内有一个嵌套的表单组customerSigninForm，因此要访问该组内的email和pwd控件，这些输入必须位于带有{{ 1}}。例如：

formGroupName="customerData"

但是我真诚地根本不明白为什么需要它，只需使用：

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()">
    <div class="form-group" formGroupName="customerData">
        <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/>
        <span *ngIf="!customerSigninForm.get('customerData.email').valid && customerSigninForm.get('customerData.email').touched" class="help-block">Please enter a valid email!</span>
    </div>
    <div class="form-group" formGroupName="customerData">
        <input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="pwd"/>
        <span *ngIf="!customerSigninForm.get('customerData.pwd').valid && customerSigninForm.get('customerData.pwd').touched" class="help-block">Please enter a valid password!</span>
    </div>
    <div class="form-group">
        <div class="extra-btns align-items-center">
            <button class="btn btn-link ">Forget Password</button>
            <button class="btn btn-link ">Forget Password</button>
        </div>
        <div>
            <button type="submit" class="  btn form-btn btn-lg btn-block">Sign In With Email</button>
        </div>
    </div>
</form>

并在html中进行相应的更改：

this.customerSigninForm = new FormGroup({
       'email': new FormControl(null, [Validators.required, Validators.email], this.forbiddenEmails),
       'pwd': new FormControl(null, [Validators.required,
       Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')
        ])
     });

我还认为现代浏览器可以接受这些标记，但是通常最好关闭输入标记，例如

<form action="" [formGroup]="customerSigninForm" (ngSubmit)="onSubmit()"> <div class="form-group"> <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="email" type="text" id="email" formControlName="email"/> <span *ngIf="!customerSigninForm.get('email').valid && customerSigninForm.get('email').touched" class="help-block">Please enter a valid email!</span> </div> <div class="form-group"> <input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="pwd"/> <span *ngIf="!customerSigninForm.get('pwd').valid && customerSigninForm.get('pwd').touched" class="help-block">Please enter a valid password!</span> </div> <div class="form-group"> <div class="extra-btns align-items-center"> <button class="btn btn-link ">Forget Password</button> <button class="btn btn-link ">Forget Password</button> </div> <div> <button type="submit" class=" btn form-btn btn-lg btn-block">Sign In With Email</button> </div> </div> </form>

找不到名称为电子邮件的控件，找不到名称为pwd的控件，也未定义onSubmit

2 个答案: