tushar balar tushar balar - 14 days ago 11
TypeScript Question

Typescript error Property does not exist on type

I am new to angularjs 2 and ionic 2. I am working with angularjs form with Validators, FormControl and FormGroup. Everything is good when I execute the project using ionic serve --lab. but when I build that project it gives error: Property 'username' does not exist on type.

login.ts

import { Component } from '@angular/core';

import { LoadingController, NavController } from 'ionic-angular';

import { AuthService } from '../../service/authService';

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

@Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {

user: any;

submitAttempt: boolean = false;

slideTwoForm : FormGroup;

constructor(public navCtrl: NavController,
public authService: AuthService,
public loadingCtrl: LoadingController,
private formBuilder: FormBuilder) {

this.slideTwoForm = formBuilder.group({
username: ['', Validators.compose([Validators.minLength(5), Validators.required])],
description: ['', Validators.required],
age: ['']
});
}

logForm() {
if (!this.slideTwoForm.valid) {
this.submitAttempt = true;
}
}

}


login.html

<ion-content padding>
<form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate>
<ion-item>
<ion-label floating>Username</ion-label>
<ion-input #username formControlName="username" type="text"></ion-input>
</ion-item>
<ion-item *ngIf="!slideTwoForm.controls.username.valid && submitAttempt">
<p>Please enter a valid name.</p>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea formControlName="description"></ion-textarea>
</ion-item>
<ion-item>
<ion-label floating>Age</ion-label>
<ion-input formControlName="age" type="number"></ion-input>
</ion-item>
<ion-item *ngIf="!slideTwoForm.controls.age.valid && submitAttempt">
<p>Please enter a valid age.</p>
</ion-item>
<button ion-button type="submit">Submit</button>
</form>
</ion-content>


Everything is fine until I run ionic build android command to generate apk file.

Can someone please tell me why I am receiving these errors?

I also refers this link: Property does not exist on type. TypeScript but it can't help me:

Answer
<ion-content padding>
    <form [formGroup]="slideTwoForm" (ngSubmit)="logForm()" novalidate>
        <ion-item>
            <ion-label floating>Username</ion-label>
            <ion-input #username formControlName="username" type="text"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls["username"].valid  && submitAttempt">
            <p>Please enter a valid name.</p>
        </ion-item>
        <ion-item>
          <ion-label>Description</ion-label>
          <ion-textarea formControlName="description"></ion-textarea>
        </ion-item>
        <ion-item>
            <ion-label floating>Age</ion-label>
            <ion-input formControlName="age" type="number"></ion-input>
        </ion-item>
        <ion-item *ngIf="!slideTwoForm.controls["age"].valid  && submitAttempt">
            <p>Please enter a valid age.</p>
        </ion-item>
        <button ion-button type="submit">Submit</button>
    </form>
</ion-content>