javascript - FormBuilder 总是为复选框返回 null

Question

我正在创建一个基本的登录页面。如果用户要添加另一个用户，则只需输入密码，然后勾选该框即可。如果他们拥有正确的权限，他们将只能添加另一个用户（这一点我将能够自己弄清楚）。

我设法让密码输入工作，用户输入密码，我可以将其记录到控制台（请记住，这只是一个测试）。我似乎无法读取复选框的值，它总是返回null.

HTML

<div class="login">
  <h2 class="login-header">Log in</h2>
  <form [formGroup]="loginForm" class="login-container" (ngSubmit)="login()">


    <p [ngClass]="{ 'has-error': isSubmitted && formControls.password.errors }">
      <input type="password" placeholder="Password" formControlName="password" autofocus  autocomplete="off">
    </p>

    <p>
      <input id="addUser" type="checkbox" name="addUser" value="addUser" formcontrolName="checkbox">Add User?
    </p>

    <div id="invalid">
      <p>Invalid Login... Try Again</p>
    </div>
    <p>
      <input type="submit" value="Log in">
    </p>
  </form>
</div>

.ts

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


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

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

  loginForm: FormGroup;
  isSubmitted = false;
  loginDetails: any = []
  loginLength: any = [];

  ngOnInit() {
    this.loginForm = this.FormBuilder.group({
      password: ['', Validators.required],
      checkbox: new FormControl
    })
  }
  get formControls() { return this.loginForm.controls}

  login() {
    var checkboxresult = this.loginForm.get('checkbox').value;
    console.log(checkboxresult)
    console.log(this.loginForm)
  }
}

当复选框被选中时，我希望它返回true，而当它不是时，我希望它返回false。目前它只返回null。

我已经尝试按照本指南进行操作，但这会返回null。按下提交时如何获取true或false从表单获取？

标签： javascripthtmlangular