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

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();
  }
}

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

Answer 1

您有一个嵌套表单组，customerSigninForm 内有 customerData，因此要访问该组内的 email 和 pwd 控件，这些输入必须位于另一个带有 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>

但我真的不明白你为什么需要它，只需使用：

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,}')
        ])
     });

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

<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>

我也认为现代浏览器接受这些，但通常最好关闭输入标签，例如

<input ... />

Answer 2

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();
}