angularjs - Egenskapen finns inte på typen. TypeScript

Jag byggde ett enkelt formulär som har viss validering i Ionic 2. Formuläret fungerade bra med ionic serve men fungerar inte med ionic run. Jag tror att problemet inte är med Ionic utan med mitt TypeScript. På något sätt måste jag antingen inte importera rätt sak eller inte definiera rätt egenskaper. Här är min kod.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Validators, FormBuilder, FormGroup } from '@angular/forms';
import {Http, Request, RequestMethod } from '@angular/http';


/*
  Generated class for the ContactUs page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})

export class Contact {

  inputGroup: FormGroup;

  buttonDisabled = true;
  fullNameError = false;
  emailError = false;
  subjectError = false;
  messageError = false;

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http) {

    this.inputGroup = this.formBuilder.group({
    fullName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
    email: ['', Validators.compose([Validators.required])],
    subject: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
    message: ['', Validators.compose([Validators.maxLength(500), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
     });

  }



adjustButton(){
    if(this.inputGroup.controls.fullName.valid == true) {
        this.fullNameError = false;
    } 

    if(this.inputGroup.controls.email.valid == true) {
        this.emailError = false; 
    }

    if(this.inputGroup.controls.subject.valid == true) {
        this.subjectError = false;
    }

    if(this.inputGroup.controls.message.valid == true) {
        this.messageError = false;
    }
  }

  something() {
    console.log("Something happened");
  }

  onClick() {
    // if the fullName field is not valid display error
    if(!this.inputGroup.controls.fullName.valid) {
        this.fullNameError = true;
    } else {
        this.fullNameError = false;
    }




    if(!this.inputGroup.controls.email.valid) {
        this.emailError = true;
    } else {
        this.emailError = false;
    }

    if(!this.inputGroup.controls.subject.valid) {
        this.subjectError = true;
    } else {
        this.subjectError = false;
    }

    if(!this.inputGroup.controls.message.valid) {
        this.messageError = true;
    } else {
        this.messageError = false;
    }
  }

  ionViewDidLoad() {
    console.log('Hello ContactUs Page');
  }

}

Då här är min fel logg.

01:23:43]  ngc: Error: Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:40:30: Property 'fullName' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:44:30: Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:48:30: Property 'subject' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:52:30: Property 'message' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:63:31: Property 'fullName' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:72:31: Property 'email' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:78:31: Property 'subject' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ts:84:31: Property 'message' does not exist on type '{ [key: string]: AbstractControl; }'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:788:41: Property 'fullName' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:820:41: Property 'email' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:857:41: Property 'subject' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:889:41: Property 'message' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1175:43: Property 'fullName' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1190:43: Property 'email' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1205:43: Property 'subject' does not exist on type 'Contact'.
Error at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/.tmp/pages/contact/contact.ngfactory.ts:1220:43: Property 'message' does not exist on type 'Contact'.
    at check (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:31:15)
    at Tsc.typeCheck (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/tsc.js:86:9)
    at /Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@angular/tsc-wrapped/src/main.js:33:23
    at process._tickCallback (internal/process/next_tick.js:103:7)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3


[01:23:43]  ngc: Compilation failed

[01:23:43]  ngc failed:  NGC encountered an error
[01:23:43]  Error: NGC encountered an error
    at ChildProcess.<anonymous> (/Users/Zach/Desktop/badgerLoop/badgerloop_app_v2/node_modules/@ionic/app-scripts/dist/ngc.js:62:24)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)

Error running ionic app script "build": Error: NGC encountered an error

Kan någon snälla berätta för mig varför jag får dessa fel?

Svar #1

Jag lyckades lösa detta genom att inte använda punktsyntax för att komma åt kartans egenskaper.

Du använder punktnotation i din controller (t.ex. !this.inputGroup.controls.fullName.valid). Jag tror att det är okej, men om du använder punktnotation i din mall (t.ex. *ngIf="inputGroup.controls.fullName") kommer du att få detta problem på grund av skillnader mellan just-in-time-kompilatorn (JIT) och ahead-of-time-kompilatorn (AoT). Jag tror att ionic serve använder JIT, men ionic build använder AoT.

I din mall, ändra användningar så att de ser ut så här: inputGroup.controls['fullName']

Den här tråden hjälpte mig att förstå problemet.

ionic info

Your system information:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 16.04.1 LTS 
Node Version: v6.6.0

Svar #2

se till att du importerar FormControl och tilldelar inputvärdena med "formcontrolname".

Använd i din HTML

<ion-input formControlName="fullName" type="text"></ion-input>

I din TS:

public fullName: FormControl;
 constructor(public navCtrl: NavController, private formBuilder: FormBuilder, http: Http) {
    this.fullName = new FormControl("", Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required]));
    this.inputGroup = this.formBuilder.group({
    fullName: this.fullName,
});