Using @angular/material 2.0.0-beta3, if you have a form like this:
<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>
And a component like this:
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():{
}
}
It will start ignoring your 'color' choice and start coloring the field based on the associated form state as soon as you dirty the field.
I don't want my input fields to turn to the warning color until the user has tried to submit the form, but that isn't an option. Previosuly I could tell it when I wanted it to change color based on a submit flag along with checking if the input is valid. Now it seems the 'color' option just sets the initial color (and not even that - it is the initial color when the user enters the input field - so you get to enjoy your color choice for all of about 1 second).
Is there anyway to control the color of mdInput even after the user starts interacting with the field?
In the past, this would work, and the property to use was dividerColor (assuming you had a submitted property that you set to true when the form was submitted):
<md-input-container dividerColor="{{!submitted || myForm.valid ? 'primary' : 'warn'}}">
<input mdInput type="text" formControlName="one" placeholder="one">
</md-input-container>
I had a quick look through the documentation and, unfortunately, found no Angular Material way around this.
So instead, I went for the best universal approach and used direct CSS.
1. Here are the style rules to apply to your site. Not sure if you're using SASS or LESS or another CSS pre-processor, so here is the vanilla CSS:
.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. Then, you need to add a class form-unsubmitted to your form element via ngClass:
<form [formGroup]="myForm" novalidate (ngSubmit)="submit()" [ngClass]="{'form-unsubmitted': !submitted}">
...
</form>
3. And on submit() change the public variable to true, like so:
public submitted: boolean = false;
submit() {
this.submitted = true;
}
Here is a working example. All of the styles are in the head of the index.html.