1
resposta

Campo vermelho para obrigatorio

Nos videos do prof. Flavio, ele comenta sobre criar um small para mensagem de obrigatoriedade.

Como eu faco para deixar em vermelho o input, em vez de mostrar um texto?

    <div class="form-group">
      <input
        formControlName="userName"
        class="form-control"
        placeholder="user name"
        autofocus
      />
      <small
        *ngIf="loginForm.get('userName').errors?.required"
        class="text-danger d-block mt-2">
        User name is required!
      </small>
    </div>
1 resposta

Você pode estilizar as classes do próprio angular, por exemplo a classe .ng-invalid em conjunto com a ng-dirty.

Inclua essa regra CSS no seu arquivo de estilos (pode ser o app.component.css).

input.ng-dirty.ng-invalid {
  border: 1px solid red;
}

Quando há algo que torne o campo inválido (obrigatoriedade, formato inválido, etc...), o angular automaticamente adiciona a classe ng-invalid.

E o ng-dirty, é ativado ao modificar o campo.

https://angular.io/guide/form-validation#control-status-css-classes