如何修复反应式表单验证中的“对象可能为空”错误？

Question

在我的 .ts 文件中，我已将 null 设置为反应式表单的默认值，并使用反应式表单中的必需属性进行验证，如下所示：

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

@Component({
  selector: 'app-rective-forms',
  templateUrl: './rective-forms.component.html',
  styleUrls: ['./rective-forms.component.css']
})
export class RectiveFormsComponent implements OnInit {

genders = ['Male' , 'Female'];

  signUpForm!: FormGroup;

  ngOnInit(): void {
    this.signUpForm = new FormGroup ( {                                                      // empty Reactive Form Created 
      'username' : new FormControl( null ,Validators.required) ,                               // Adding username input field with initial value 'null'.
       'email' : new FormControl(null , [Validators.required , Validators.email] ),                                   // Adding email input field with initial value 'null'.
       'gender' : new FormControl('Male')                                               // Adding gender radio button with default value as 'Male'.
     } );  

  }

onSubmit(){
  console.log(" Form Submitted ! ");
  console.log(this.signUpForm);
  
  
}

在我的 HTML 中，我尝试使用 get 方法在字段无效时显示消息。但是，它显示一个错误，表示“对象可能为空”。我不知道我做错了什么。我已正确导入 ReactiveFormsModule。除了这个之外，其他的东西都工作得很好。请帮我解决这个问题。谢谢你。

 <input type="text"
               id="username"
               formControlName="username"
                class="form-control"
                >

                <span 
                *ngIf="!signUpForm.get('username').valid && signUpForm.get('username').touched"
                class="help-block"
                > Enter User Name ! </span>

Answer 1

首先你应该将 FormBuilder 注入到构造函数中，如下代码所示：

私人FB：FormBuilder，

然后您可以像这样的代码创建表单组：

this.signUpForm = this.fb.group({
用户名：[null，[Validators.required]]， ...
} );

并且以 Html 形式，您应该编写以下代码：

<form class="text-center" [formGroup]="signUpForm" (ngSubmit)="login()">
 <div class="form-group my-3">
      <div class="form-floating">
        <input type="text" class="form-control text-right" id="floatingusername" formControlName="username"
          placeholder="username">
        <label for="floatingusername">username</label>
      </div>
      <small class="form-text text-right text-danger"
        *ngIf="loginForm.get('username').hasError('required') && loginForm.get('username').touched">
       username is required
      </small>
    </div>

Answer 2

我正在使用 TypedForm。无法访问“

hasError

”方法。