Angular 异常：未捕获（承诺中）：TypeError:无法读取属性'；触摸'；空的

我试图在Angular2应用程序中使用反应式表单，但遇到如下异常

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

异常：未捕获（承诺中）：TypeError:无法读取属性 null类型的“toucted”错误：无法读取null类型的属性“toucted”

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

我的示例代码如下所示

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {FormGroup, FormControl} from '@angular/forms';
import { Customer } from './customer';

@Component({
moduleId:module.id,
templateUrl: 'sign-up.reactiveForms.html'
})

export class SignupComponent  {

customer: Customer= new Customer();


customerForm : FormGroup; //it assosciate html element with this root model

ngOnInit() : void {


   this.customerForm=new FormGroup({

        firstName: new FormControl(),
         lastName: new FormControl(),
         email: new FormControl(),
         sendCatalog: new FormControl(true)

   });
}

save() {
    console.log(this.customerForm);
  }

}

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

sign-up.reactiveForms.html文件如下

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import {FormGroup, FormControl} from '@angular/forms';
import { Customer } from './customer';

@Component({
moduleId:module.id,
templateUrl: 'sign-up.reactiveForms.html'
})

export class SignupComponent  {

customer: Customer= new Customer();


customerForm : FormGroup; //it assosciate html element with this root model

ngOnInit() : void {


   this.customerForm=new FormGroup({

        firstName: new FormControl(),
         lastName: new FormControl(),
         email: new FormControl(),
         sendCatalog: new FormControl(true)

   });
}

save() {
    console.log(this.customerForm);
  }

}

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

名字
请输入您的名字。
名字必须超过3个字符。

---

我正在试图弄清楚为什么toucted属性为null。

尝试初始化表单控件，使它们不会为null：

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

this.customerForm=new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
    email: new FormControl(''),
    sendCatalog: new FormControl(true)
});

否则，使用安全导航操作符可能会删除空错误，例如：

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>

customerForm.get('firstName')?.touched

---

但是，仅初始化表单控件就应该（希望）解决这个问题。

该消息并不意味着touch属性为null，它意味着CustomPerform没有名字。我尝试了你的代码，但我无法重现你的问题，这意味着它对我来说工作正常。作为一种猜测，请尝试使用安全的导航操作符。至少应该考虑空错误，但验证可能无法工作（？）。但是试试。。。e、 g:

customerForm.get（'firstName'）？.touch

            <!-- First Name input -->

            <div class="form-group"
                [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) && !customerForm.get('firstName').valid }">
                <label class="col-md-2 control-label" 
                       for="firstNameId">First Name</label>

                <div class="col-md-8">
                    <input class="form-control" 
                           id="firstNameId" 
                           type="text" 
                           placeholder="First Name (required)" 
                           required 
                           minlength="3"
                           formControlName="firstName"
                             />
                    <span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) && customerForm.get('firstName').errors">
                        <span *ngIf="customerForm.get('firstName').errors.required">
                            Please enter your first name.
                        </span>
                        <span *ngIf="customerForm.get('firstName').errors.minlength">
                            The first name must be longer than 3 characters.
                        </span>
                    </span>
                </div>
            </div>