로그인 페이지 validation 에러 메시지 표출방식 수정. >> 하단에 한번에 출력하는 방식으로 수정.

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html

@@ -9,33 +9,54 @@
   <form name="loginForm" [formGroup]="loginForm" novalidate>
     <mat-form-field [style.display]="!!curCompanyCode ? 'none' : 'block'">
       <mat-label>{{ 'accounts.fieldCompany' | translate }}</mat-label>
-      <mat-select formControlName="companyCode" required>
+      <mat-select [formControl]="companyCodeFormControl">
         <mat-option
           *ngFor="let company of companyList"
           [value]="company.companyCode"
           >{{ company.companyName }}
         </mat-option>
       </mat-select>
-      <mat-error *ngIf="loginForm.get('companyCode').hasError('required')">
-        {{ 'accounts.errors.requireCompany' | translate }}
-      </mat-error>
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
-      <input matInput formControlName="loginId" />
-      <mat-error *ngIf="loginForm.get('loginId').hasError('required')">
-        {{ 'accounts.errors.requireLoginId' | translate }}
-      </mat-error>
+      <input matInput [formControl]="loginIdFormControl" />
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
-      <input matInput type="password" formControlName="loginPw" #loginPw />
-      <mat-error>
+      <input
+        matInput
+        type="password"
+        [formControl]="loginPwFormControl"
+        #loginPw
+      />
+    </mat-form-field>
+
+    <div class="error-container">
+      <mat-error
+        *ngIf="
+          companyCodeFormControl.dirty &&
+          companyCodeFormControl.hasError('required')
+        "
+      >
+        {{ 'accounts.errors.requireCompany' | translate }}
+      </mat-error>
+      <mat-error
+        *ngIf="
+          loginIdFormControl.dirty && loginIdFormControl.hasError('required')
+        "
+      >
+        {{ 'accounts.errors.requireLoginId' | translate }}
+      </mat-error>
+      <mat-error
+        *ngIf="
+          loginPwFormControl.dirty && loginPwFormControl.hasError('required')
+        "
+      >
         {{ 'accounts.errors.requireLoginPw' | translate }}
       </mat-error>
-    </mat-form-field>
+    </div>
 
     <button
       mat-raised-button

projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts

@@ -8,7 +8,13 @@ import {
   ElementRef,
   ChangeDetectorRef
 } from '@angular/core';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import {
+  FormGroup,
+  FormBuilder,
+  Validators,
+  FormControl,
+  ValidatorFn
+} from '@angular/forms';
 import { Company } from '@ucap-webmessenger/api-external';
 
 @Component({
@@ -57,6 +63,9 @@ export class LoginComponent implements OnInit {
   @ViewChild('loginPw', { static: true }) loginPwElementRef: ElementRef;
 
   loginForm: FormGroup;
+  companyCodeFormControl = new FormControl('');
+  loginIdFormControl = new FormControl('');
+  loginPwFormControl = new FormControl('');
 
   constructor(
     private formBuilder: FormBuilder,
@@ -64,10 +73,23 @@ export class LoginComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    const companyCodeValidators: ValidatorFn[] = [Validators.required];
+    this.companyCodeFormControl.setValidators(companyCodeValidators);
+    if (!!this.curCompanyCode) {
+      this.companyCodeFormControl.setValue(this.curCompanyCode);
+    }
+    const loginIdValidators: ValidatorFn[] = [Validators.required];
+    this.loginIdFormControl.setValidators(loginIdValidators);
+    if (!!this.loginId) {
+      this.loginIdFormControl.setValue(this.loginId);
+    }
+    const loginPwValidators: ValidatorFn[] = [Validators.required];
+    this.loginPwFormControl.setValidators(loginPwValidators);
+
     this.loginForm = this.formBuilder.group({
-      companyCode: ['', [Validators.required]],
-      loginId: ['', [Validators.required]],
-      loginPw: ['', Validators.required],
+      companyCodeFormControl: this.companyCodeFormControl,
+      loginIdFormControl: this.loginIdFormControl,
+      loginPwFormControl: this.loginPwFormControl,
       rememberMe: [false],
       autoLogin: [false]
     });
@@ -80,13 +102,6 @@ export class LoginComponent implements OnInit {
       this.loginForm.get('autoLogin').setValue(true);
     }
 
-    if (!!this.curCompanyCode) {
-      this.loginForm.get('companyCode').setValue(this.curCompanyCode);
-    }
-    if (!!this.loginId) {
-      this.loginForm.get('loginId').setValue(this.loginId);
-    }
-
     if (!this.loginBtnText || this.loginBtnText.trim().length === 0) {
       this.loginBtnText = 'LOGIN';
     }