时间戳

首页 > 解决方案 > Ionic 3 - 无效时更改输入和标签的颜色

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

问题描述

当 FormControl 无效时，如何更改“离子标签”和“离子输入” （边框底部）的颜色？像这样：

字段有效：

字段有效

字段无效：

字段无效

<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>

标签： angularionic3

解决方案

你可以这样做。

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

推荐阅读