Question

我是具有离子性的新手，特别是实际上使用的离子性4。

我正在处理注册表格和登录信息。一切工作正常，但在验证并打开chrome控制台时，它显示了加载表单时的许多错误。

错误是：

错误TypeError：“ _ co.form未定义” 错误上下文对象{视图：{…}，nodeIndex：105，nodeDef：{…}，elDef：{…}，elView：{…}}

无论表单加载如何，我都可以输入数据，验证也有效，它显示了字段为空或不正确时的正常错误。但是这个镀铬错误...，我也觉得它们落后于我的应用程序。

我的代码是这样的：

html：

<ion-header>
    <ion-toolbar color="primary">
      <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
      </ion-buttons>
      <ion-title>
        Registro
      </ion-title>
    </ion-toolbar>
  </ion-header>

        <ion-content padding>
        <form (ngSubmit)="saveEntry()" [formGroup]="formgroup" >
            <!-- NOMBRE -->  
              <ion-item>
                <ion-label position="floating">Usuario</ion-label>
                <ion-input class="form-control" type="text"  formControlName="name" color="primary" ></ion-input>
              </ion-item>
              <ion-label *ngIf="name.hasError('required') && name.touched" style="color:red;" padding>Nombre es requerido</ion-label>
              <!-- EMAIL -->  
              <ion-item>
                  <ion-label position="floating">Email</ion-label>
                  <ion-input type="email"  formControlName="email" color="primary"></ion-input>
                </ion-item>
                <ion-label *ngIf="email.hasError('required') && email.touched" style="color:red;" padding>Email es requerido</ion-label>              
              <!-- PASS 1  -->  
              <ion-item>
                  <ion-input [type]="passwordType" placeholder="Introduzca su contraseña" color="primary" formControlName="pass"></ion-input><ion-icon name="eye" item-right (click)="mostrarContrasenya(1)" [color]="colorOjo"></ion-icon>
              </ion-item>
              <ion-label *ngIf="pass.hasError('required') && pass.touched" style="color:red;" padding>Debe introducir la contraseña</ion-label>  
              <!-- PASS 2 -->  
              <ion-item>
                <ion-input [type]="passwordType2" placeholder="Repita su contraseña" color="primary" formControlName="pass2"></ion-input><ion-icon name="eye" item-right (click)="mostrarContrasenya(2)" [color]="colorOjo2"></ion-icon>
              </ion-item>
              <ion-label *ngIf="pass2.hasError('required') && pass2.touched" style="color:red;" padding>Debe introducir la segunda contraseña</ion-label>  

                <ion-list>
                  <ion-radio-group name="auto">
                    <ion-list-header>Sexo</ion-list-header>
                    <ion-item>
                      <ion-label>Masculino</ion-label>
                      <ion-radio value="masculino"></ion-radio>
                    </ion-item>
                    <ion-item>
                      <ion-label>Femenino</ion-label>
                      <ion-radio value="femenino"></ion-radio>
                    </ion-item>
                  </ion-radio-group>
                </ion-list>


              <div padding>
                  <ion-grid fixed>
                    <ion-row>
                      <ion-col size="6">
                          <ion-button size="large" expand="block" color="secondary" type="submit" [disabled]="!form.valid">Registrar</ion-button>
                      </ion-col>
                      <ion-col size="6">
                          <ion-button size="large" expand="block" color="medium" (click)="cancelar()">Cancelar</ion-button>
                      </ion-col>
                    </ion-row>
                  </ion-grid>

                </div>
            </form>
        </ion-content>

ts：

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';
import {FormBuilder,FormGroup,AbstractControl,Validators} from '@angular/forms';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.page.html',
  styleUrls: ['./registro.page.scss'],
})
export class RegistroPage implements OnInit {

  passwordType:string = 'password';
  passwordShown:boolean=false;
  colorOjo:string = 'medium';

  passwordType2:string = 'password';
  passwordShown2:boolean=false;
  colorOjo2:string = 'medium';

  formgroup:FormGroup;
  name:AbstractControl;
  email:AbstractControl;
  pass:AbstractControl;
  pass2:AbstractControl;


  constructor(public navCtrl:NavController,public formbuilder:FormBuilder) {
    this.formgroup=formbuilder.group({
      name:['',Validators.required],
      //email:['',Validators.required]
      email: ['', Validators.compose([
      Validators.required,
      Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
      ])],
      pass:['',Validators.required],
      pass2:['',Validators.required],
    });
    this.name=this.formgroup.controls['name'];
    this.email=this.formgroup.controls['email'];

    this.pass=this.formgroup.controls['pass'];
    this.pass2=this.formgroup.controls['pass2'];

  }



  ngOnInit() {
  }

  saveEntry(){
    alert("Suelta el torpedo loco");
  }
  cancelar(){
    this.navCtrl.goBack();
  }

  mostrarContrasenya(int:number){
    if(int == 1){
      if(this.passwordShown){
        this.passwordShown=false;
        this.passwordType='password';
        this.colorOjo='medium';
      }else{
        this.passwordShown=true;
        this.passwordType='text';
        this.colorOjo='primary';
      }
  }else{

    if(this.passwordShown2){
      this.passwordShown2=false;
      this.passwordType2='password';
      this.colorOjo2='medium';
    }else{
      this.passwordShown2=true;
      this.passwordType2='text';
      this.colorOjo2='primary';
    }
  }
}

}

我还要问，如果输入无效，是否可以绘制输入边框，而不是默认为蓝色。

感谢您的时间，祝您愉快！

Answer 1

好吧，问题出在那儿，我删除了它[[disabled] =“！form.valid”并可以正常工作。我想现在知道如何在输入边框无效的情况下更改其颜色吗？

使用反应式表单验证时出现Ionic 4多个错误

1 个答案: