堆栈内存溢出
  繁体   English   中英

属性在类型上不存在。打字稿

[英]Property does not exist on type. TypeScript

 原文  2016-10-20 06:37:12  3   3    angularjs/ typescript/ controls/ ionic2

问题描述

我建立了一个简单的形式，在Ionic 2中对它进行了一些验证。这种形式在离子发射中运行良好，但不适用于离子运行。 我相信这个问题不是离子而是我的类型脚本。 不知何故，我不能输入正确的东西或不定义合适的财产。 这是我的代码。 

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

}

那么这是我的错误日志。 

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

有人可以告诉我为什么我收到这些错误？

3 个解决方案

解决方案1
 6 已采纳  2016-10-20 11:01:21

我设法通过不使用点表示法来访问地图属性来解决这个问题。

您在控制器中使用点表示法（例如!this.inputGroup.controls.fullName.valid ）。 我认为这很好，但是如果你在你的模板中使用点符号（例如。 *ngIf="inputGroup.controls.fullName" ），你会遇到这个问题，因为即时编译器（JIT）和提前编译器（AoT）。 我认为ionic serve使用JIT，但ionic build使用AoT。

在您的模板中，将用法更改为如下所示： inputGroup.controls['fullName']

这个帖子帮助我理解了这个问题。 

$ 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

解决方案2
 0  2016-10-20 07:51:10

也许尝试设置这样的属性（ 与顶点 ）： 

this.inputGroup = this.formBuilder.group({
    'fullName': [...],
    'email': [...],
    'subject': [...],
    'message': [...],
});

在你的.html中： 

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <ion-item>
       <ion-label>FullName</ion-label>
       <ion-input formControlName="fullName"></ion-input> 
    </ion-item>
</form>

编辑：这是RC.1中的一个工作示例：

.TS 

export class RootRegistrazione {
    myForm: FormGroup;
    userInfo: {phone: string} = {phone: ''};

    constructor(public navCtrl: NavController, public formBuilder: FormBuilder) {
        this.myForm = this.formBuilder.group({
              'phone': ['', this.phoneValidator.bind(this)]              
        });
    }

    phoneValidator(control: FormControl): {[s: string]: boolean} {
        if (control.value !== '') {
            if (!control.value.match(/^[0-9]{3}-[0-9]{7}$/)) {
                return {invalidPhone: true};
            }
        }
    }

    isValid(field: string) {
        let formField = this.myForm.get(field);
        return formField.valid || formField.pristine;
    }

    onSubmit() {
        console.log('submitting form');
    }
}

html的 

<ion-content padding class="registration">
    <ion-list>
        <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
            <ion-item>
                <ion-label color="primary" stacked>Cellphone</ion-label>
                <ion-input [(ngModel)]="userInfo.phone" formControlName="phone" type="text"></ion-input>
            </ion-item>
            <p *ngIf="!isValid('phone')" color="danger" padding-left>Invalid number, expected format "012-3456789"</p>

            <button ion-button full color="favorite" type="submit" [disabled]="!myForm.valid">Create Account</button>
        </form>
    </ion-list>
</ion-content>

希望我现在帮助过你:)

解决方案3
 0  2016-10-20 08:03:38

确保导入FormControl并使用“formcontrolname”分配输入值。

在您的HTML使用中 

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

在你的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,
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 即使包含类型文件，Typescript也会抛出属性上不存在的属性 错误“类型为&#39;IAugmentedJQuery&#39;的Typescript不存在属性&#39;datepicker&#39; 解决打字稿错误的最佳方法 - 类型上不存在属性 打字稿错误：&#39;HTMLElement&#39;类型中不存在属性&#39;append&#39; TypeScript构建错误：“ IStateParamsService”类型不存在属性 类型“#”错误中不存在属性“#” 属性“ requestOptions”在类型上不存在 类型“Observable”上不存在“finally”属性<Object> &#39; &#39;typeof Foods&#39;类型不存在属性&#39;id&#39; “IAngularStatic”类型上不存在属性“模拟”
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM