ngClass disappears with multiple conditions

[KerimBayramoglu]

Prettier 1.15.1
Playground link

# Options (if any):
angular

Input:

<div class="form-group">
    <input type="password" [ngClass]="{
        'is-invalid':
          (registerForm.get('confirmPassword').errors &&
           registerForm.get('confirmPassword').touched) ||
          (registerForm.get('confirmPassword').touched &&
          registerForm.hasError('mismatch'))
      }"
      class="form-control" formControlName="confirmPassword" placeholder="confirm password" />
    <div class="invalid-feedback" *ngIf="
        registerForm.get('confirmPassword').hasError('required') &&
        registerForm.get('confirmPassword').touched
      ">
      Wachtwoord vereist!
    </div>
    <div class="invalid-feedback" *ngIf="
        registerForm.hasError('mismatch') &&
        registerForm.get('confirmPassword').touched
      ">
      Wachtwoorden komen niet overeen!
    </div>
  </div>

Output:

<div class="form-group">
  <input
    type="password"
    [ngClass]="{
      '':
        (registerForm.get('confirmPassword').errors &&
          registerForm.get('confirmPassword').touched) ||
        (registerForm.get('confirmPassword').touched &&
          registerForm.hasError('mismatch'))
    }"
    class="form-control"
    formControlName="confirmPassword"
    placeholder="confirm password"
  />
  <div
    class="invalid-feedback"
    *ngIf="
      registerForm.get('confirmPassword').hasError('required') &&
      registerForm.get('confirmPassword').touched
    "
  >
    Wachtwoord vereist!
  </div>
  <div
    class="invalid-feedback"
    *ngIf="
      registerForm.hasError('mismatch') &&
      registerForm.get('confirmPassword').touched
    "
  >
    Wachtwoorden komen niet overeen!
  </div>
</div>

Expected behavior:

the class 'is-invalid' should not disappear when using OR '||'

[ikatyang]

Hi, this should be fixed by #5387, we plan to release a patch tomorrow.

Prettier pr-5387
Playground link

--parser angular

Input:

<div class="form-group">
    <input type="password" [ngClass]="{
        'is-invalid':
          (registerForm.get('confirmPassword').errors &&
           registerForm.get('confirmPassword').touched) ||
          (registerForm.get('confirmPassword').touched &&
          registerForm.hasError('mismatch'))
      }"
      class="form-control" formControlName="confirmPassword" placeholder="confirm password" />
    <div class="invalid-feedback" *ngIf="
        registerForm.get('confirmPassword').hasError('required') &&
        registerForm.get('confirmPassword').touched
      ">
      Wachtwoord vereist!
    </div>
    <div class="invalid-feedback" *ngIf="
        registerForm.hasError('mismatch') &&
        registerForm.get('confirmPassword').touched
      ">
      Wachtwoorden komen niet overeen!
    </div>
  </div>

Output:

<div class="form-group">
  <input
    type="password"
    [ngClass]="{
      'is-invalid':
        (registerForm.get('confirmPassword').errors &&
          registerForm.get('confirmPassword').touched) ||
        (registerForm.get('confirmPassword').touched &&
          registerForm.hasError('mismatch'))
    }"
    class="form-control"
    formControlName="confirmPassword"
    placeholder="confirm password"
  />
  <div
    class="invalid-feedback"
    *ngIf="
      registerForm.get('confirmPassword').hasError('required') &&
      registerForm.get('confirmPassword').touched
    "
  >
    Wachtwoord vereist!
  </div>
  <div
    class="invalid-feedback"
    *ngIf="
      registerForm.hasError('mismatch') &&
      registerForm.get('confirmPassword').touched
    "
  >
    Wachtwoorden komen niet overeen!
  </div>
</div>