角度反应形式错误|错误TypeError：无法读取未定义的属性“有效”

Question

这是我第一次尝试使用被动形式，不用说我没有走得太远。我收到这个错误：ERROR TypeError: Cannot read property 'valid' of undefined我错过了什么吗？我一直在关注this教程来学习。我对使用被动表格完全不熟悉所以任何建议都会有所帮助。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {

    loginForm: FormGroup;
    username = new FormControl('', Validators.required);
    password = new FormControl('', Validators.required);
    rememberme = new FormControl('');

    constructor(
        private fb: FormBuilder
    ) {
        this.loginForm = fb.group({
            'username': this.username,
            'password': this.password,
            'rememberme': this.rememberme
        });
    }

    onSubmit() {
        console.log('model-based form submitted');
        console.log(this.loginForm);
        return false;
    }

}


`
<div id="leftPart"></div>
<div id="rightPart" class="container-fluid px-4 py-2">
    <img src="assets/SVG/logo.svg" class="d-block w-50 mx-auto my-4" />
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
            <input class="form-control" placeholder="User Name" type='text' formControlName="username">
        </div>
        <div class="form-group">
            <input class="form-control" placeholder="Password" type='password' formControlName="password" />
        </div>
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="form-group m-0">
                <div class="form-check m-0">
                    <label class="form-check-label">
                        <input class="form-check-input" type="checkbox" formControlName="rememberme">
                        Remember me
                    </label>
                </div>
            </div>
            <button class="btn btn-transparent" style="font-size: 1rem;">
                <i class="fa fa-lock mr-2"></i>Forgot pwd?
            </button>
        </div>
        <button class="btn btn-primary btn-rounded btn-lg btn-block" type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>
`

Answer 1

你正在命名你的形式loginForm

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">

在submit按钮上你试图通过[disabled]="!form.valid"禁用它但是Angular不知道什么是form，因为你命名你的形式loginForm，因此它应该是[disabled]="!loginForm.valid"

Answer 2

打字稿

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './index.html'
})

export class LoginComponent implements OnInit {
  private form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      userName: [null, Validators.required],
      password: [null, Validators.required],
      rememberMe: [null]
    });
  }

  onSubmit() {
    console.log('model-based form submitted');
    console.log(this.form);
    return false;
  }
}

HTML

<form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <input class="form-control" placeholder="User Name" type="text" id="userName" formControlName="userName">
    </div>
    <div class="form-group">
        <input class="form-control" placeholder="Password" type="password" id="password" formControlName="password">
    </div>
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="form-group">
            <div class="form-check m-0">
                <input class="form-check-input" type="checkbox" id="rememberMe" formControlName="rememberMe">Remember
            </div>
        </div>
        <button class="btn btn-transparent">Forgot pwd?</button>
    </div>
    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Submit</button>
</form>