Bootstrap validation is not working in Angular framework

Question

I need to have the color of the input boxes change color according to its state, valid or invalid. I am following a tutorial and in his tutorial it is able to change. I copied and pasted his codes so I can be very sure that I am not missing anything, but I stil can't get it to work. Please see my code below:

styles.css

input.ng-touched.ng-invalid{
  border-color: #dc3545;
}

input.ng-valid{
  border-color: #28a745;
}

payment-detail-component.ts

<form #form="ngForm" autocomplete="off">
    <input type="hidden" name="PMId" [value]="service.formData.PMId">
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text bg-white">
            <i class="fas fa-user-circle" [class.green-icon]="CardOwnerName.valid" [class.red-icon]="CardOwnerName.invalid && CardOwnerName.touched"></i>
          </div>
        </div>
        <input name="CardOwnerName" #CardOwnerName="ngModel" [(ngModel)]="service.formData.CardOwnerName" class="form-control"
          placeholder="Card Owner Name" required>
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text bg-white">
            <i class="far fa-credit-card"  [class.green-icon]="CardNumber.valid" [class.red-icon]="CardNumber.invalid && CardNumber.touched"></i>
          </div>
        </div>
        <input name="CardNumber" #CardNumber="ngModel" [(ngModel)]="service.formData.CardNumber"
        class="form-control" placeholder="16 Digit Card Number" required maxlength="16" minlength="16">
      </div>
    </div>
    <div class="form-row">
      <div class="form-group col-md-7">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text bg-white">
              <i class="fas fa-calendar-alt"  [class.green-icon]="ExpirationDate.valid" [class.red-icon]="ExpirationDate.invalid && ExpirationDate.touched"></i>
            </div>
          </div>
          <input name="ExpirationDate" #ExpirationDate="ngModel" [(ngModel)]="service.formData.ExpirationDate" class="form-control"
            placeholder="MM/YY" required maxlength="5" minlength="5">
        </div>
      </div>
      <div class="form-group col-md-5">
        <div class="input-group">
          <div class="input-group-prepend">
            <div class="input-group-text bg-white">
              <i class="fas fa-key"  [class.green-icon]="CVV.valid" [class.red-icon]="CVV.invalid && CVV.touched"></i>
            </div>
          </div>
          <input type="password" name="CVV" #CVV="ngModel" [(ngModel)]="service.formData.CVV" class="form-control" placeholder="CVV"
          required  maxlength="3" minlength="3">
        </div>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-success btn-lg btn-block" type="submit" [disabled]="form.invalid"><i class="fas fa-database"></i> Submit</button>
    </div>
  </form>

When I use the inspector, I should be seeing the different state of the iput boxes like "pristine", "touched", "dirty", etc. But I am not seeing it. Can you please show me how to this right? Thank you.

Can you create a stackblitz for this question?

Todarmal
– Todarmal

2019-03-14 05:05:08 +00:00
Commented Mar 14, 2019 at 5:05 — Todarmal
– Todarmal, Commented Mar 14, 2019 at 5:05

Ibanez1408 · Accepted Answer · 2019-03-14 05:06:39Z

3

For those who are interested, the codes are correct. My problem was the ngModels were undefined so I needed to do this in my component.ts file:

formData: PaymentDetail = {
    CVV: null,
    CardNumber: null,
    CardOwnerName: null,
    ExpirationDate: null,
    PMId: null
  }

answered Mar 14, 2019 at 5:06

Ibanez1408

5,10813 gold badges75 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RalfFriedl · Accepted Answer · 2019-06-18 19:30:33Z

0

the problem was in payment-details.service.ts
Add the formData like this:

export class PaymentDetailService {
  formData: PaymentDetail = {
    CVV: null,
    CardNumber: null,
    CardOwnerName: null,
    ExpirationDate: null,
    PMId: null
  }

edited Jun 18, 2019 at 19:30

RalfFriedl

1,1303 gold badges11 silver badges14 bronze badges

answered Jun 18, 2019 at 16:38

Sao

1

Collectives™ on Stack Overflow

Bootstrap validation is not working in Angular framework

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related