Typescript error Property does not exist on type

Question

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:

dhyanandra singh · Accepted Answer · 2016-11-23 09:05:40Z

2

<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>

answered Nov 23, 2016 at 9:05

dhyanandra singh

1,1412 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Balar Over a year ago

Thanx @dhyanandra

misha130 · Accepted Answer · 2016-11-23 10:18:09Z

2

Ionic2 uses ahead of time compile when building to android. AoT requires:

A) properties to be public

B) properties that are mentioned in the html to be declared in the component.

So to fix your problem declare public username:string; in the component and aswell declare other names you are accessing in your form.

Or ... in the html you can write formControlName='user.username' and use the property you already declared.

Don't forget to declare your elementref in the component aswell

edited Nov 23, 2016 at 10:18

answered Nov 12, 2016 at 16:56

misha130

5,7862 gold badges31 silver badges55 bronze badges

2 Comments

kolexinfos Over a year ago

Can I get the AOT Compiler to ignore some these html type errors

misha130 Over a year ago

@kolexinfos didn't see your comment but look at other answer. They ignored the errors by using [] property get so there is no static compiler check on that. That's how you get it to ignore the problems

Collectives™ on Stack Overflow

Typescript error Property does not exist on type

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related