Ionic 3 - 无效时更改输入和标签的颜色答案

【问题标题】：Ionic 3 - Change color of Input and Label when InvalidIonic 3 - 无效时更改输入和标签的颜色
【发布时间】：2019-10-01 20:40:11
【问题描述】：

FormControl无效时，如何更改"ion-label"和"ion-input"（border-bottom）的颜色？像这样：

字段有效：

字段无效：

<ion-content>

  <form (ngSubmit)="save(f)" #f="ngForm">

     <ion-item>
        <ion-label stacked>City:</ion-label>
        <ion-input [(ngModel)]="object.city" name="city" required></ion-input>
     </ion-item>

  </form>

</ion-content>

【问题讨论】：

标签： angular ionic3

【解决方案1】：

你可以这样做。

HTML

<form [formGroup]="todo" (ngSubmit)="logForm()">
    <ion-item>
        <ion-label [color]="color" floating>Todo</ion-label>
        <ion-input formControlName="title" [ngStyle]="{'border-bottom':error}"></ion-input>
    </ion-item>
    <button ion-button type="submit">Submit</button>
</form>

TS

 private todo: FormGroup;
 color = "gray";
 error = '';

 constructor(private formBuilder: FormBuilder) {
    this.todo = this.formBuilder.group({
      title: ["", Validators.required]
    });
  }

  logForm() {
    if (this.todo.invalid) {
      this.color = "danger";
      this.error = '1px solid red';
    } else {
      this.color = 'gray';
      this.error = '';
    }
    console.log(this.todo);
  }

演示：https://stackblitz.com/edit/validate-ion-inputs

【讨论】：

【解决方案2】：

你可以使用离子输入的颜色属性

basics colors

 <ion-item>
    <ion-label stacked>City:</ion-label>
    <ion-input [(ngModel)]="object.city" name="city" color="cityInputColor()" required></ion-input>
 </ion-item>

还有ts文件：

public cityInputColor(): string {
  ...
  return cityClass
}

【讨论】：

【解决方案3】：

我这样解决问题：

<ion-item [class.invalid]="f.controls.city?.invalid">
   <ion-label stacked>City:</ion-label>
   <ion-input [(ngModel)]="object.city" name="city" required></ion-input>
</ion-item>

和：

.item.item-md.invalid:not(.input-has-focus):not(.item-input-has-focus) .label.label-md {
    color: #f53d3d; 
}
.item.item-md.invalid:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
    border-bottom-color: #f53d3d;
}

【讨论】：

【解决方案4】：

您可以使用 formBuilder 实现类似的功能：

在您的模板代码中：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>


  <form [formGroup]="cityForm">

    <ion-item>
      <ion-label stacked [color]="cityForm.controls.cityname.valid? 'primary':'danger'">City:</ion-label>
      <ion-input type="text" formControlName="cityname" placeholder="type in"></ion-input>
    </ion-item>

  </form>


</ion-content>

在你的 ts 代码中：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  cityForm: FormGroup;

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {

    this.cityForm = this.formBuilder.group({
            cityname: ['', Validators.compose([Validators.pattern('^[a-zA-Z0-9\-\_]{3,20}$'), Validators.required])]
          });

  }

}

演示：https://stackblitz.com/edit/ionic-slyodb

【讨论】：

【解决方案5】：

要更改验证文本消息的颜色，请使用如下所示的标签：

<span class="error ion-padding" *ngIf="isSubmitted && errorControl.name.errors?.required"> <ion-label color="danger">Name is required.</ion-label> </span>

【讨论】：