title: I want to display one error at a time with reactive forms and angular material
body: <p>I am using Angular reactive forms and Angular material.
  My code is working good.
  But I want to display one error at a time</p>
  
  <p>My .html file code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;form [formGroup]="accountDetailsForm" novalidate (ngSubmit)="onSubmitAccountDetails(accountDetailsForm.value)"&gt;
  
          &lt;mat-form-field class="full-width"&gt;
            &lt;input matInput maxlength="25" placeholder="Username" formControlName="username" required&gt;
            &lt;mat-error *ngFor="let validation of account_validation_messages.username"&gt;
              &lt;mat-error class="error-message" *ngIf="accountDetailsForm.get('username').hasError(validation.type) &amp;&amp; (accountDetailsForm.get('username').dirty || accountDetailsForm.get('username').touched)"&gt;{{validation.message}}&lt;/mat-error&gt;
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
  
          &lt;mat-form-field class="full-width"&gt;
            &lt;input matInput type="email" placeholder="Email" formControlName="email" required&gt;
            &lt;mat-error *ngFor="let validation of account_validation_messages.email"&gt;
              &lt;mat-error class="error-message" *ngIf="accountDetailsForm.get('email').hasError(validation.type) &amp;&amp; (accountDetailsForm.get('email').dirty || accountDetailsForm.get('email').touched)"&gt;{{validation.message}}&lt;/mat-error&gt;
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
  
  
          &lt;div formGroupName="matching_passwords"&gt;
            &lt;mat-form-field class="full-width"&gt;
              &lt;input matInput type="password" placeholder="Password" formControlName="password" required&gt;
              &lt;mat-error *ngFor="let validation of account_validation_messages.password"&gt;
                &lt;mat-error class="error-message" *ngIf="accountDetailsForm.get('matching_passwords').get('password').hasError(validation.type) &amp;&amp; (accountDetailsForm.get('matching_passwords').get('password').dirty || accountDetailsForm.get('matching_passwords').get('password').touched)"&gt;{{validation.message}}&lt;/mat-error&gt;
              &lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
  
            &lt;mat-form-field class="full-width"&gt;
              &lt;input matInput type="password" placeholder="Confirm Password" formControlName="confirm_password"  [errorStateMatcher]="parentErrorStateMatcher" required&gt;
              &lt;mat-error *ngFor="let validation of account_validation_messages.confirm_password"&gt;
                &lt;mat-error class="error-message" *ngIf="(accountDetailsForm.get('matching_passwords').get('confirm_password').hasError(validation.type)|| accountDetailsForm.get('matching_passwords').hasError(validation.type)) &amp;&amp; (accountDetailsForm.get('matching_passwords').get('confirm_password').dirty || accountDetailsForm.get('matching_passwords').get('confirm_password').touched)"&gt;{{validation.message}}&lt;/mat-error&gt;
              &lt;/mat-error&gt;
            &lt;/mat-form-field&gt;
  
          &lt;/div&gt;
  
          &lt;mat-checkbox formControlName="terms"&gt;
            I accept terms and conditions
          &lt;/mat-checkbox&gt;
          &lt;mat-error *ngFor="let validation of account_validation_messages.terms"&gt;
            &lt;mat-error class="error-message" *ngIf="accountDetailsForm.get('terms').hasError(validation.type) &amp;&amp; (accountDetailsForm.get('terms').dirty || accountDetailsForm.get('terms').touched)"&gt;{{validation.message}}&lt;/mat-error&gt;
          &lt;/mat-error&gt;
  
          &lt;button class="submit-btn" color="primary" mat-raised-button type="submit" [disabled]="!accountDetailsForm.valid"&gt;
            Submit
          &lt;/button&gt;
  
        &lt;/form&gt;
  
      </code></pre>
  </div>
  </div>
  </p>
  
  <p>My .ts file code</p>
  
  <p>Here, I'm specifying error messages for error that</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>account_validation_messages = {
      'username': [
        { type: 'required', message: 'Username is required' },
        { type: 'minlength', message: 'Username must be at least 5 characters long' },
        { type: 'maxlength', message: 'Username cannot be more than 25 characters long' },
        { type: 'pattern', message: 'Your username must contain only numbers and letters' },
        { type: 'validUsername', message: 'Your username has already been taken' }
      ],
      'email': [
        { type: 'required', message: 'Email is required' },
        { type: 'pattern', message: 'Enter a valid email' }
      ],
      'confirm_password': [
        { type: 'required', message: 'Confirm password is required' },
        { type: 'areEqual', message: 'Password mismatch' }
      ],
      'password': [
        { type: 'required', message: 'Password is required' },
        { type: 'minlength', message: 'Password must be at least 5 characters long' },
        { type: 'pattern', message: 'Your password must contain at least one uppercase, one lowercase, and one number' }
      ],
      'terms': [
        { type: 'pattern', message: 'You must accept terms and conditions' }
      ]
    }
    
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Validators for form</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> this.accountDetailsForm = this.fb.group({
        username: new FormControl('', Validators.compose([
         UsernameValidator.validUsername,
         Validators.maxLength(25),
         Validators.minLength(5),
         Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'),
         Validators.required
        ])),
        email: new FormControl('', Validators.compose([
          Validators.required,
          Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
        ])),
        matching_passwords: this.matching_passwords_group,
        terms: new FormControl(false, Validators.pattern('true'))
      })</code></pre>
  </div>
  </div>
  </p>
  
  <p>All is working fine but problem is that I'm using ngFor to display error but I want to display one error at a time with the help of mat-error.</p>