Почему класс не применяется к элементу ввода, если он недопустим в управляемой шаблоном форме Angular 4?

Question

Я использовал шаблонную форму для моей страницы входа. Мне нужна красная граница для элементов ввода, если они недопустимы или имеют какие-либо ошибки, но класс borderRed не добавляется к элементу ввода, когда ввод пуст или недействителен.

<form (ngSubmit)="f.form.valid && signin()" #f="ngForm" class="m-login__form m-form" action="">
  <ng-template #alertSignin></ng-template>

  <div class="form-group form-md-line-input form-md-floating-label">
    <label>
      Email <span class="text-danger">*</span>
    </label>
    <input [class.borderRed]="email.invalid" class="form-control m-input" type="text" required="required" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">
  </div>

  <div class="form-group form-md-line-input form-md-floating-label">
    <label [pTooltip]="attachementTooltipmsg" tooltipPosition="top" for="form_control_1">
      Password <span class="text-danger">*</span>
    </label>
    <input [class.borderRed]="password.invalid" class="form-control m-input" required="" name="password" type="password" [(ngModel)]="model.password" #password="ngModel">
  </div>

  <div class="m-login__form-action">
    <button [disabled]="loading" [ngClass]="{'m-loader m-loader--right m-loader--light': loading}" id="m_login_signin_submit" class="btn btn-focus m-btn m-btn--pill m-btn--custom m-btn--air">
      Sign In
    </button>
  </div>
</form>

Answer 1

Используйте ngClass для динамического добавления различных классов. Пример:

     <input class="form-control" id="firstName" name="firstName" type="text" placeholder="First Name" formControlName="firstName" [ngClass]="{
            'has-success': firstName.valid,
            'has-danger': (firstName.invalid && firstName.dirty) || (!isFormSubmitted && firstName.invalid)}">

Если FirstName недопустимо и грязно (пользователь фактически коснулся этого поля), то добавьте has-danger class.
Если firstName действительно , затем добавьте has-success class.
Примечание: firstName - это элемент управления формой

Answer 2

Вы можете сделать это. это работает для меня: -

<div class="form-group" [class.has-error]="fullnameControl.invalid && (fullnameControl.dirty || fullnameControl.touched)" 
        [class.has-success]="fullnameControl.valid">
            <label class="control-label">Full Name Field </label>
            <input 
                type="text" 
                required
                class="form-control" 
                name="fullname" 
                id="fullname" [(ngModel)]="fullname"
                #fullnameControl="ngModel"

            />
            <span class="help-block" 
               *ngIf="fullnameControl.invalid && (fullnameControl.dirty 
              || fullnameControl.touched)">Full Name is required. </span>
        </div>

Answer 3

Angular добавляет некоторые классы CSS, когда ввод действителен или нет. Вы можете переопределить CSS, чтобы он выглядел так, как вы хотите. При таком подходе вам не нужно делать [class.borderRed]=... на каждом входе. https://angular.io/guide/forms

.ng-valid[required], .ng-valid.required  {
  border: 1px solid green;
}

.ng-invalid:not(form)  {
  border: 1px solid red;
}

Answer 4

Используйте это

   <input [class.borderRed]="email.touched && !email.valid" class="form-control m-input" type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">

Проверьте StackBiltz

Отредактированный код

Answer 5

Для проверки электронной почты добавьте директиву email, например <input type="email" name="email" ngModel email>

Или вы можете использовать атрибут pattern, например:

<div class="form-group">
              <label for="inputEmail">Email</label>
              <input type="text"
                [ngModel] = "user.email" name="email"
                #email="ngModel" id="inputEmail"
                placeholder="Email"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"
                required>
            </div>

<!-- This is the error section -->

<div *ngIf="email.invalid && (email.dirty || email.touched)"
    class="alert alert-danger">
    <div *ngIf = "email.errors?.required">
        Email field can't be blank
    </div>
    <div *ngIf = "email.errors?.pattern && email.touched">
        The email id doesn't seem right
    </div>
 </div>

Также лучше пометить обязательные поля, просто добавив required. Для ввода пароля вы можете использовать такой валидатор, как этот minlength ="8".

Как правило, вы должны указать правила валидации. В реактивных формах вы должны указать это в классе компонента, например:

this.myForm = this.f.group({ name: ['', Validators.required ], });

Answer 6

Это должно работать

<input [ngClass]="{'borderRed':email.invalid}" class="form-control m-input" type="text" required="required" name="email" [(ngModel)]="model.email" #email="ngModel" autocomplete="off">