угловой материал 2 - как изменить поля mat-form и пользовательский CSS mat-form - PullRequest
Новая
       14

угловой материал 2 - как изменить поля mat-form и пользовательский CSS mat-form

0 голосов
/ 27 июня 2018

Я хочу, чтобы mat-form-fields / mat-input настраивали CSS

Пример 1) угловой материал 2 

<mat-form-field >
            <input matInput
                   [(ngModel)]="affiliateForm.name"
                   required name="affiliate_name"
                   placeholder="test">
</mat-form-field>

Результат: view.html

по умолчанию: enter image description here invaild: enter image description here


пользовательский глобальный CSS: global.css 

.mat-input-infix.mat-form-field-infix{
                border: 2px solid blue;
}

Результат: view.html по умолчанию: enter image description here я хочу вторгнуться: enter image description here

          how to change custom invaild CSS Style?
          thank you have a good day.

1 Ответ

0 голосов
/ 27 июня 2018

Используйте классы ng-invalid и ng-invalid следующим образом: 

input.ng-valid {
    border: 2px solid green;
}
input.ng-invalid {
    border: 2px solid red;
}

Angular добавляет эти дополнительные классы для вас динамически , только если вы используете FormGroup. 

//*.component.ts
constructor() {
    this.affiliateForm = new FormGroup({
        affiliateName: new FormControl('', Validators.required)
    })
}

И шаблон такой: 

<!-- *.component.html -->
<form [formGroup]="affiliateForm">
    <mat-form-field >
        <input matInput
               formControlName="affiliateName"
               placeholder="test">
    </mat-form-field>
</form>
...