为什么 Angular 6 会出现“找不到具有未指定名称属性的控件”错误？

Question

我正在为我的前端编写注册页面，但我遇到了一个错误，即“找不到具有未指定名称属性的控件”。我相信这表明我的 register.component.ts 中没有定义控制器，但我已经在我的 TS 代码中这样做了。

这是我的 register.html。

<form class="example-form" [formGroup]="registerForm" (ngSubmit)="handleSubmit()">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <mat-form-field class="example-full-width">
  <input matInput placeholder="First Name" [formControl]="firstNameC">
    <mat-error *ngIf="firstNameC.invalid">{{firstNameError()}}</mat-error>
 </mat-form-field>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Last Name" [formControl]="lastNameC">
    <mat-error *ngIf="lastNameC.invalid"> {{lastNameError()}} </mat-error>
  </mat-form-field>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="email" [formControl]="emailC">
    <mat-error *ngIf="emailC.invalid">{{emailError()}}</mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput placeholder="password" [formControl]="passwordC">
    <mat-error *ngIf="passwordC.invalid">{{passwordError()}}</mat-error>
  </mat-form-field>

  <button mat-raised-button color="accent"> Register </button>

</form>

输入控制器在 ngOnInit() 中定义，但在类中声明。

import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import {RouterModule} from '@angular/router';
import {Routes} from '@angular/router';
import {
  MatToolbarModule, MatButtonModule, MatInputModule, MatIconModule, MatSelectModule, MatTableModule, MatGridListModule,
  MatCardModule, MatMenuModule, MatFormFieldModule, MatOptionModule, MatRadioModule
} from '@angular/material';
import {HttpClientModule } from '@angular/common/http';
import {FormBuilder, FormControl, FormsModule} from '@angular/forms';
import {FormGroup} from '@angular/forms';
import {Validators} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import 'hammerjs';


@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
  registerForm: FormGroup;
  loading = false;
  submitted = false;
  hide = true;
  public lastNameC: FormControl;
  public firstNameC: FormControl;
  public emailC:  FormControl;
  public passwordC: FormControl;
  handleSubmit() {
    console.log(this.registerForm.value);
    alert('You registered!');
  }

  trueOrFalse() {
    return this.registerForm.valid;
  }

  passwordError() {
    return this.passwordC.hasError('minlength') ? 'Your password is too short.' :
      this.passwordC.hasError('pattern') ? 'Your password must have one uppercase letter, one lowercase letter, one number and one non alphanumeric character.' :
        ' ';
  }

  lastNameError() {
    if (this.lastNameC.hasError('required')) {
      return 'Last name is required.';
    }
  }

  emailError() {
    return this.emailC.hasError('required') ? 'You must enter a value.' :
      this.emailC.hasError('email') ? 'Not a valid email. Please read the field again.' :
        ' ';
  }

  firstNameError() {
  if (this.firstNameC.hasError('required')) {
    return 'Enter your first name.';
  }



  }
  /*
        this.emailC = new FormControl('', [Validators.required, Validators.email]);
    this.firstNameC = new FormControl('', [Validators.required]);
    this.lastNameC = new FormControl('', [Validators.required]);
    this.passwordC = new FormControl('',
      [Validators.required, Validators.minLength(8),
        Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,}')]);
   */



  constructor() {

  }

  ngOnInit() {
    this.registerForm = new FormGroup({
      emailC: new FormControl('', [Validators.required, Validators.email]),
      firstNameC : new FormControl('', [Validators.required]),
      lastNameC: new FormControl('', [Validators.required]),
      passwordC : new FormControl('', [Validators.required, Validators.minLength(8), Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[$@$!%*?&])[A-Za-z\\d$@$!%*?&]{8,}')]),
    });


  }


}

但是，我的控制台中有一个错误。

RegisterComponent.html:1 ERROR Error: Cannot find control with unspecified name attribute
    at _throwError (forms.js:1732)
    at setUpControl (forms.js:1640)
    at FormControlDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormControlDirective.ngOnChanges (forms.js:4303)
    at checkAndUpdateDirectiveInline (core.js:9247)
    at checkAndUpdateNodeInline (core.js:10515)
    at checkAndUpdateNode (core.js:10477)
    at debugCheckAndUpdateNode (core.js:11110)
    at debugCheckDirectivesFn (core.js:11070)
    at Object.eval [as updateDirectives] (RegisterComponent.html:4)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11062)

我必须在我的注册 html 中使用 FormControlName 而不是 [formControl] 吗？这是我的 stackblitz 测试演示。我永远感激你的帮助。

My SB demo(MCV example)

Answer 1

是的，您应该考虑使用formControlName。我的表单控件如下所示：

<input class="form-control"
     id="productCodeId"
     type="text"
     placeholder="Code (required)"
     formControlName="productCode" />

注意上面代码中使用的formControlName。

我的组件有这样的代码：

ngOnInit(): void {
  this.productForm = this.fb.group({
    productName: ['', [Validators.required,
                       Validators.minLength(3),
                       Validators.maxLength(50)]],
    productCode: ['', Validators.required],
    starRating: ['', NumberValidators.range(1, 5)],
    description: ''
  });
}

这样做的另一个好处是不需要为每个 FormControl 定义单独的变量。