错误类型错误：“无法分配给“signUpForm”上的属性“验证器”：不是对象”答案

【问题标题】：ERROR TypeError: "can't assign to property "validator" on "signUpForm": not an object"错误类型错误：“无法分配给“signUpForm”上的属性“验证器”：不是对象”
【发布时间】：2019-04-24 18:19:05
【问题描述】：

错误类型错误：“无法分配给“注册表单”上的属性“验证器”：不是对象”

我尝试了在同一个问题中回答的所有解决方案，但没有奏效。 "can't assign to property "validator" on "formControlAnimalSelect": not an object" Angular Typescript

我还检查了我的 TypeScript 代码中的 FormGroup 和我的 HTML 中的表单元素之间的链接，它是正确的。

 //typescript
import { Component, OnInit } from '@angular/core';
  import {FormBuilder, FormGroup, Validators} from '@angular/forms';
  import {AuthService} from '../../services/auth.service';
  import {Router} from '@angular/router';

  @Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent implements OnInit {

  signUpForm: FormGroup;
  errorMessage: string;

  constructor(private formBuilder: FormBuilder,
              private authService: AuthService,
              private router: Router) { }

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.signUpForm = this.formBuilder.group({
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.pattern
      (/[0-9a-zA-Z]{6,}/)]]
    });
  }

  onSubmit() {
    const email = this.signUpForm.get('email').value;
    const password = this.signUpForm.get('password').value;
    this.authService.createNewUser(email, password).then(
      () => {
        this.router.navigate(['/books']);
      },
    (error) => {
      this.errorMessage = error;
    }

    );
  }


}

<html>
<div class="row">
  <div class="col-sm-8 col-sm-offset-2">
    <h2>Create an account</h2>
    <form formGroup="signUpForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="email"> Email </label>
        <input type="text" id="email" class="form-control"
               formControlName="email">
      </div>

      <div class="form-group">
        <label for="password"> Password </label>
        <input type="password" id="password"
               class="form-control" formControlName="password">
      </div>
      <button class="btn btn-primary" type="submit"
              [disabled]="signUpForm.invalid"> Create account</button>
    </form>
    <p class="text-danger">{{errorMessage}}</p>
  </div>
</div>

【问题讨论】：

标签： angular html typescript

【解决方案1】：

你的 HTML 应该是这样的

试试这个：

<html>
<div class="row">
  <div class="col-sm-8 col-sm-offset-2">
    <h2>Create an account</h2>
    <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="email"> Email </label>
        <input type="text" id="email" class="form-control"
               formControlName="email">
      </div>

      <div class="form-group">
        <label for="password"> Password </label>
        <input type="password" id="password"
               class="form-control" formControlName="password">
      </div>
      <button class="btn btn-primary" type="submit"
              [disabled]="signUpForm.invalid"> Create account</button>
    </form>
    <p class="text-danger">{{errorMessage}}</p>
  </div>
</div>

【讨论】：

【解决方案2】：

你必须错过绑定FormGroup，如果你必须添加这个，为什么会发生错误，你的代码是好的。

HTML：

<div class="row">
  <div class="col-sm-8 col-sm-offset-2">
    <h2>Create an account</h2>
    <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="email"> Email </label>
        <input type="text" id="email" class="form-control"
               formControlName="email">
      </div>

      <div class="form-group">
        <label for="password"> Password </label>
        <input type="password" id="password"
               class="form-control" formControlName="password">
      </div>
      <button class="btn btn-primary" type="submit"
              [disabled]="signUpForm.invalid"> Create account</button>
    </form>
    <p class="text-danger">{{errorMessage}}</p>
  </div>
</div>

您也可以查看链接：

https://stackblitz.com/edit/angular-buks6o?file=src%2Fapp%2Fapp.component.ts

【讨论】：

@YoussefKhedher 很高兴为您提供帮助:)