Блог

Привет, у меня есть этот класс css, который выдает красную рамку, когда поле ввода является обязательным, а поле ввода недопустимо. Он меняется на зеленый, когда поле ввода становится действительным.

CSS

 .ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}
  

HTML

 <input
              type="text"
              class="form-control"
              placeholder="Vehicle Code"
              [formControl]="codeControl"
              required
            />
  

Теперь мне нужно установить левую границу на другой цвет, когда она еще не была затронута. Потому что с тем, что у меня есть сейчас, при загрузке страницы, левая граница по умолчанию красная и меняется на зеленую при проверке.

Вы можете использовать ngStyle или ngClass.

Для этого примера я использовал ngClass (мой предпочтительный метод).

Component.css:

 .valid {
  border-left: 5px solid #42A948;
}

.required {
  border-left: 5px solid #a94442;
}
  

Component.html

 <form [formGroup]="form">
  <input 
    type="text" 
    [formControl]="name" 
    [ngClass]="{'required': name.invalid amp;amp; (name.dirty || name.touched), 'valid': name.valid amp;amp; (name.dirty || name.touched)}"
  >
</form>
  

Component.ts

 export class AppComponent  {
  constructor() { }

  form = new FormGroup({
    name: new FormControl('', Validators.required)
  });

  get name(): AbstractControl {
    return this.form.get('name')
  } 
}
  

Я также поместил здесь Stackblitz для вашей справки, ниже:

https://stackblitz.com/edit/angular-5xsg7r

Счастливого кодирования 🙂