웹사이트 검색

angularjs - 속성이 타입에 존재하지 않음. TypeScript

저는 Ionic 2에서 일부 유효성 검사가 있는 간단한 폼을 만들었습니다. 폼은 ionic serve에서는 잘 작동했지만 ionic run에서는 작동하지 않습니다. 문제는 Ionic 자체가 아니라 제 타입스크립트에 있다고 생각합니다. 아마도 올바른 것을 가져오지 않았거나 올바른 속성을 정의하지 않았을 것입니다. 제 코드는 다음과 같습니다.

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

누가 제게 왜 이런 오류가 발생하는지 알려줄 수 있나요?

답변 #1

저는 맵 속성에 접근할 때 점 표기법을 사용하지 않음으로써 이것을 해결할 수 있었습니다.

컨트롤러에서 점 표기법을 사용하고 있습니다(예: !this.inputGroup.controls.fullName.valid). 이것은 괜찮다고 생각하지만, 템플릿에서 점 표기법을 사용하면(예: *ngIf="inputGroup.controls.fullName") JIT(Just In Time) 컴파일러와 AoT(Ahead of Time) 컴파일러 간의 차이로 인해 문제가 발생할 수 있습니다. 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

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

관련기사