Question

使用@ angular / material 2.0.0-beta3，如果你有这样的表格：

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

这样的组件：

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():{

  }

}

Plunker

它将开始忽略您的“颜色”选择，并在您弄脏字段时立即根据关联的表单状态开始着色字段。

在用户尝试提交表单之前，我不希望我的输入字段变为警告颜色，但这不是一个选项。当我希望它根据提交标志改变颜色并检查输入是否有效时，我可以告诉它。现在似乎'颜色'选项只是设置初始颜色（甚至不是 - 它是用户输入输入字段时的初始颜色 - 所以你可以享受大约1秒的颜色选择。）

即使在用户开始与字段交互后，是否仍然可以控制mdInput的颜色？

过去，这可以使用，并且要使用的属性是dividerColor（假设您在提交表单时设置为submitted的{{1}}属性：

true

Answer 1

我快速查看了文档，遗憾的是，没有找到Angular Material方法。

相反，我选择了最好的通用方法并使用直接CSS。

1。以下是适用于您网站的样式规则。不确定你是使用SASS还是LESS或其他CSS预处理器，所以这里是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. 然后，您需要通过form-unsubmitted向表单元素添加一个类ngClass：

<form [formGroup]="myForm" novalidate (ngSubmit)="submit()" [ngClass]="{'form-unsubmitted': !submitted}">
    ...
</form>

3。并在submit()上将公共变量更改为true，如下所示：

public submitted: boolean = false;

submit() {
   this.submitted = true;
}

<强> Here is a working example 即可。所有样式都在index.html。

的头部

如何在不被告知的情况下阻止角度材料的mdInput改变颜色

1 个答案: