Weboldal keresés

angular - Typescript hiba: A tulajdonság nem létezik a típuson

Új vagyok az AngularJS 2 és az Ionic 2-ban. AngularJS űrlapokkal dolgozom Validatorokkal, FormControl-lal és FormGroup-pal. Minden rendben van, amikor a projektet a ionic serve --lab parancs segítségével futtatom. De amikor a projektet buildelni próbálom, hiba: A 'username' tulajdonság nem létezik a típuson.

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

}

bejelentkezés.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>

Minden rendben van, amíg futtatom a ionic build android parancsot az apk fájl generálásához.
Tudna valaki kérem elmondani, miért kapom ezeket a hibákat?

Én is hivatkozom erre a linkre: A tulajdonság nem létezik ezen a típuksen. TypeScript, de ez nem tud segíteni nekem:

Válasz #1

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

Válasz #2

Az Ionic2 az előre időzített fordítást (ahead of time compile) használja Androidra való építéskor. Az AoT a következőket igényli:

A) a tulajdonságok legyenek nyilvánosak

B) azok a tulajdonságok, amelyeket a HTML-ben említenek, és amelyeket a komponensben kell deklarálni.

Tehát a problémád megoldásához deklaráld a public username:string; változót a komponensben, és ugyanígy deklaráld a többi nevet is, amelyeket az űrlapodban érsz el.

Vagy ... az HTML-ben írhatod így: formControlName='user.username', és használhatod a már deklarált tulajdonságot.

Ne felejtsd el deklarálni az elementref-edet a komponensben is

Kapcsolódó cikkek