TS2531：物件可能為“空”。反應式表單驗證

嗨，我嘗試在 angular 11 中進行反應式表單驗證，但它在終端中顯示以下錯誤。

錯誤TS2531 物件可能為空。

我在 register-form.component.ts 中的代碼

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

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})
  
export class RegisterFormComponent  {
       title = 'Register Form';
        angForm: FormGroup;
        submitted = false;
        
        constructor(private fb: FormBuilder) {
        this.angForm = this.fb.group({
        title: ['', Validators.required ],
        name: ['', Validators.required ],
        gender: ['', Validators.required],
        address: ['', Validators.required ],
        email: ['', Validators.required],
        acceptTerms: [false, Validators.requiredTrue]
        });
    } 
}

在 register-form.component.html 中

        <div class="form-group ">
            <label>Name:</label>
            <input class="form-control" formControlName="name" type="text">
            </div>
            <div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
                <div *ngIf="angForm.controls['name'].errors['required']">
                  Name is required.
                </div>
            </div>

當我運行它的顯示錯誤時

register-form.component.html:26:17 - 錯誤 TS2531：物件可能為“空”。

uj5u.com熱心網友回復：

試試這個，

你的 html 看起來像這樣，

<div class="form-group " [formGroup]="angFormInstance">
    <label>Name:</label>
    <input class="form-control" formControlName="name" type="text">
</div>
<div *ngIf="angFormInstance.controls['name'].invalid && (angFormInstance.controls['name'].dirty || angFormInstance.controls['name'].touched)" class="alert alert-danger">
    <div *ngIf="angFormInstance.controls['name'].errors['required']">
        Name is required.
    </div>
</div>

和 ts 檔案就像，

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

@Component({
  selector: 'app-register-form',
  templateUrl: './register-form.component.html',
  styleUrls: ['./register-form.component.css']
})
  
export class RegisterFormComponent  {
       title = 'Register Form';
        angForm: FormGroup;
        submitted = false;

        get angFormInstance(): any {
          return this.angForm
        }
        
        constructor(private fb: FormBuilder) {
        this.angForm = fb.group({
        title: ['', Validators.required ],
        name: ['', Validators.required ],
        gender: ['', Validators.required],
        address: ['', Validators.required ],
        email: ['', Validators.required],
        acceptTerms: [false, Validators.requiredTrue]
        });
    } 
}

uj5u.com熱心網友回復：

打字稿檔案：

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

@Component({
    selector: 'app-register-form',
    templateUrl: './register-form.component.html',
    styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent  {
    title = 'Register Form';
    angForm: FormGroup;
    submitted = false;
        
    constructor(private fb: FormBuilder) {
        this.angForm = this.fb.group({
            title: ['', Validators.required ],
            name: ['', Validators.required ],
            gender: ['', Validators.required],
            address: ['', Validators.required ],
            email: ['', Validators.required],
            acceptTerms: [false, Validators.requiredTrue]
        });
    } 

    get angFormInstance():any {
        return this.angForm.controls;
    }
}

HTML檔案：

<div class="form-group " [formGroup]="angFormInstance">
    <label>Name:</label>
    <input class="form-control" formControlName="name" type="text">

    <span class="text-danger" *ngIf="(angFormInstance.name.touched || 
    submitted) && angFormInstance.name.errors?.required">
        Name is required
    </span>
</div>

標籤：有角的 打字稿 验证

上一篇：限制重力形式日歷中的日期

下一篇：僅在使用Blazor提交時驗證表單