Usando @angular/material 2.0.0-beta3, si tiene un formulario como este:
<div style="padding: 7px"> <form [formGroup]="myForm" novalidate (ngSubmit)="submit()"> <md-input-container color="primary"> <input mdInput type="text" formControlName="one" placeholder="one"> </md-input-container> <br/> <md-input-container color="primary"> <input mdInput type="text" formControlName="two" placeholder="two"> </md-input-container> </form> </div>Y un componente como este:
import {Component, OnInit} from '@angular/core'; import {Http} from '@angular/http' import {bootstrap} from '@angular/platform-browser-dynamic'; import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'; @Component({ selector: 'material-app', templateUrl: 'app.component.html' }) export class AppComponent { private version: any; myForm: FormGroup; constructor(http: Http, private formBuilder: FormBuilder) { // Display the currently used Material 2 version. this.version = http .get('https://api.github.com/repos/angular/material2-builds/commits/HEAD') .map(res => res.json()) } ngOnInit():void{ this.myForm = this.formBuilder.group({ one: ['', [Validators.required]], two: ['', [Validators.required]], }); } submit():{ } }Comenzará a ignorar su elección de 'color' y comenzará a colorear el campo según el estado del formulario asociado tan pronto como ensucie el campo.
No quiero que mis campos de entrada cambien al color de advertencia hasta que el usuario haya intentado enviar el formulario, pero esa no es una opción. Anteriormente, podía decirle cuándo quería que cambiara de color en función de un indicador de envío junto con verificar si la entrada es válida. Ahora parece que la opción 'color' solo establece el color inicial (y ni siquiera eso, es el color inicial cuando el usuario ingresa el campo de entrada, por lo que puede disfrutar de su elección de color durante aproximadamente 1 segundo).
¿Hay alguna forma de controlar el color de mdInput incluso después de que el usuario comience a interactuar con el campo?
En el pasado, esto funcionaba y la propiedad que se usaba era dividerColor (suponiendo que tenía una propiedad submitted que estableció en true cuando se envió el formulario):
<md-input-container dividerColor="{{!submitted || myForm.valid ? 'primary' : 'warn'}}"> <input mdInput type="text" formControlName="one" placeholder="one"> </md-input-container>Eché un vistazo rápido a la documentación y, desafortunadamente, no encontré ninguna forma de Angular Material para evitar esto.
Entonces, en cambio, opté por el mejor enfoque universal y usé CSS directo.
1. Aquí están las reglas de estilo para aplicar a su sitio. No estoy seguro si está usando SASS o LESS u otro preprocesador de CSS, así que aquí está el CSS estándar:
.form-unsubmitted .mat-input-invalid.mat-focused .mat-input-placeholder { color: #3f51b5; } .form-unsubmitted .mat-input-invalid .mat-input-placeholder { color: rgba(0,0,0,.38); } .form-unsubmitted .mat-input-underline { border-color: rgba(0,0,0,.12); } .form-unsubmitted .mat-input-invalid.mat-input-invalid .mat-input-ripple { background-color: #3f51b5; } 2. Luego, debe agregar un form-unsubmitted clase no enviado a su elemento de formulario a través ngClass :
<form [formGroup]="myForm" novalidate (ngSubmit)="submit()" [ngClass]="{'form-unsubmitted': !submitted}"> ... </form> 3. Y al submit() cambie la variable pública a true , así:
public submitted: boolean = false; submit() { this.submitted = true; } Aquí hay un ejemplo de trabajo . Todos los estilos están en el encabezado de index.html .