离子2形式不会捕捉形式值

时间:2016-08-17 20:43:35

标签: forms angular typescript ionic2

所以我有一个看起来像这样的表格。每个输入字段都相同,因此无需发布所有241个字段。

我的问题是我无法通过类似formData.general_information_first_name之类的内容访问from值,因为它返回""什么都没有。

即使符合要求,我的所有字段都将无效。

<ion-content>
  <form #formData="authForm" (submit)="onSubmit(authForm.value)">
    <ion-item-group>
      <!-- <button light block >{{'HOME | translate'}}</button> -->

      <ion-item-divider light>{{'INFORMATION_TO_COMPLETE_LOAN_APPLICATION' | translate}}</ion-item-divider>

      <ion-item>
        <ion-label fixed="first_name">{{'FIRST_NAME' | translate}}</ion-label>
        <ion-input ngControl="general_information_first_name" type="text" value=""></ion-input>
      </ion-item>
</ion-content>

我对应的.ts文件

import {Component} from "@angular/core";
import {TranslatePipe} from "ng2-translate/ng2-translate";
import {FORM_DIRECTIVES, FormBuilder,  ControlGroup, Validators, AbstractControl} from '@angular/common';
import {CustomValidators} from './custom-validators';

@Component({
  templateUrl: 'build/pages/us-loan/us-loan.html',
  pipes: [TranslatePipe],
  directives: [FORM_DIRECTIVES]
})
export class UsCitizenPage {

    authForm: ControlGroup;
    general_information_first_name: AbstractControl;

    constructor(private fb: FormBuilder) {
        this.authForm = this.fb.group({
            'general_information_first_name': ['', Validators.compose([Validators.required, CustomValidators.onlyLetters])]
        });
        this.general_information_first_name = this.authForm.controls['general_information_first_name'];
    }

    onSubmit(formData) {
        console.log('Form submitted is ', formData);
        debugger;
        if(this.authForm.valid) {
            console.log('Submitted value: ', formData);
            debugger;
        }
    }

我的角度和离子版本信息:

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.10",
    "ionic-native": "1.3.2",
    "ionicons": "3.0.0",
    "ng2-translate": "^2.2.2",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "2.0.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^2.0.0",
    "run-sequence": "1.1.5"
  },
}

0 个答案:

没有答案