无法读取未定义离子3的属性“有错误”

Question

我正在尝试将验证应用于Ionic v3中的表单，并且会弹出此错误。离子中还有其他验证方法吗？ 代码如下：

//Type Script Code

export class HomePage {

formgroup:FormGroup;
firstname:AbstractControl;
lastname:AbstractControl;
  constructor(public navCtrl: NavController,
  public formbuilder:FormBuilder) {

  
this.formgroup = formbuilder.group({
  firstname:['',Validators.required],
  lastname:['',Validators.required]
});
  
this.firstname = this.formgroup.controls['firstname'];
this.lastname = this.formgroup.controls['lasttname'];
}

HTML Code

<form [formGroup] class="validation-errors">
<ion-list>
<ion-item>
  <ion-label>
First Name    
  </ion-label>
<ion-input type="text" formcontrolName="firstname">
</ion-input>
</ion-item>

<ion-item *ngIf="firstname.hasError('required') && firstname.touched">
    <p style="color:red"> First name is required</p>
  
  </ion-item>

<ion-item>