Question

我正在尝试使用组件在Ionic中进行表单验证。下面是我到目前为止所做的代码..我创建了组件，我在 contact.html 页面中调用它<my-text>是组件，我需要验证用户输入的内容在 contact.ts 文件的组件中，我遇到的问题是如何获取用户在 contact.ts 文件中输入组件的数据。如果您需要更多信息，请告诉我。谢谢..

contact.html

    <form [formGroup]="ContactForm">

        <div class="topp2" padding>
        <my-text ttx="Name" placeholder="Please enter your name" formControlname="name" (keyup)="validateSubmitButton()" [class.invalid]="!ContactForm.controls.name.valid && (ContactForm.controls.name.dirty || submitAttempt)"></my-text>
        <ion-item *ngIf="!ContactForm.controls.name.valid  && (ContactForm.controls.name.dirty || submitAttempt)">
                        <p class="errorMsg">Please enter a valid name.</p>
        </ion-item>
        </div>

     <div class="topp2" padding>
     <my-text ttx="Email" placeholder="Please enter your email" formControlname="email" (keyup)="validateSubmitButton()" [class.invalid]="!ContactForm.controls.email.valid && (ContactForm.controls.email.dirty || submitAttempt)"></my-text>
     <ion-item *ngIf="!ContactForm.controls.email.valid  && (ContactForm.controls.email.dirty || submitAttempt)">
                <p class="errorMsg">Please enter a valid Email.</p>
            </ion-item>
    </div>

    </form>

contact.ts

        import { Component } from '@angular/core';
        import { IonicPage, NavController, NavParams } from 'ionic-angular';
        import { MyBtnComponent } from '../../components/my-btn/my-btn';
        import { FormBuilder, FormGroup, Validators } from '@angular/forms';
        /**
         * Generated class for the Contact page.
         *
         * See https://ionicframework.com/docs/components/#navigation for more info on
         * Ionic pages and navigation.
         */

        @IonicPage()
        @Component({
          selector: 'page-contact',
          templateUrl: 'contact.html',
        })
        export class ContactPage {

          ContactForm:FormGroup;
          myBtnText: any = "Submit";
          submitAttempt: boolean = false;
          isenabled:boolean = false;

          constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder) {

               this.ContactForm = formBuilder.group({
                name: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z .]*'), Validators.required])],
             email: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$'),Validators.required]) ],
    });
    }

  validateSubmitButton(){
    console.log('inside validate submit function');
    console.log('is name valid? :'+this.ContactForm.controls.name.value);

  this.isenabled = this.ContactForm.controls.name.valid && this.ContactForm.controls.email.valid 
  console.log('Is enabled in validate submit btn is:'+this.isenabled);

  }
}

my-text.html（组件）

<!-- Generated template for the MyTextComponent component -->
<div class="mytxt">
<ion-item no-lines >    
  <ion-input type="text"  [placeholder]="text"></ion-input>
</ion-item>
</div>

MY-text.ts

import { Component,Input } from '@angular/core';

/**
 * Generated class for the MyTextComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'my-text',
  templateUrl: 'my-text.html'
})
export class MyTextComponent {

  text: string;
  @Input("ttx") plcToUse;

  constructor() {
    console.log('Hello MyTextComponent Component');
    this.text = 'Hello World!';
  }


  ngAfterViewInit(){
    this.text = this.plcToUse;
  }
}

离子形式使用组件验证

0 个答案: