Angular - 디렉티브, 반응형 모듈

디렉티브

1. 속성 디렉티브: html관련된 모양, 동작을 제어합니다. (ngClasss, ngStyle 등)
2. 구조 디렉티브: 구조를 변경 할 떄 사용합니다. (ngif, ngFor, class 등)
3. 속성 : html 속성에 값을 지정합니다(style, value, class 등)

<input type="text" [id]="'abcd'" [value]="'1234'" [class]="'cls'"/>

반응형 모듈 사용

app모듈에 ReactiveFormsModule을 사용하게 추가합니다.

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule, FormsModule,
    ReactiveFormsModule  //반응형 폼 사용
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

다음으로 기존의 login컴포넌트의 id와 pwd 변수값을 일반 문자에서 FormControl이 되게 바꾸어 줍니다.

login.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  @Input() visible1 : boolean; //받는 역할
  @Output() sendMyEvent : EventEmitter<any> = new EventEmitter(); 
  id = new FormControl('');  //폼 컨트롤러 클래스로 바꿉니다.
  pwd = new FormControl(''); //폼 컨트롤러 클래스로 바꿉니다.

  private message;

  styleArray = {'wrong_id':false, 'wrong_pwd':false};

  constructor() { 

  }

  ngOnInit(): void {

  }

  tryToLogin() : void{
    if(this.id.value =='admin' && this.pwd.value == '1234'){
      alert('로그인합니다!');
      this.visible1 = true;
      this.sendMyEvent.emit(this.visible1);  //app컴포넌트에 전달
    } else if(this.id.value != 'admin'){
      this.setMessage = 'wrong id';
      this.styleArray.wrong_id = true;
      this.styleArray.wrong_pwd = false;
    } else if(this.pwd.value != '1234'){
      this.setMessage = 'wrong pwd';
      this.styleArray.wrong_id = false;
      this.styleArray.wrong_pwd = true;
    } 
  }

  set setMessage(arg){  //대입합니다.
    this.message = arg;
  } 

  get getMessage() : any{  //가져옵니다.
    return this.message;
  }

}

id와 pwd의 값이 FormControl이라는 클래스로 변경이 되었으며, tryToLogin함수에서 값을 가져오는 방식이 value라는 속성으로 교체되었습니다.

login컴포넌트 html파일을 수정해 줍니다.

<div>Wellocome</div>
<input type="text" placeholder="id"  [formControl]="id"/>
<input type="text" placeholder="password"  [formControl]="pwd"/>
<button (click)='tryToLogin()'>Login</button>
<div>
    <span  *ngIf="pwd.value && pwd.value.length < 4">비밀 번호 {{pwd.value}}는 4자리 이상이어야 합니다.</span>
</div>
<div *ngIf="getMessage" [ngClass]="styleArray">
   {{getMessage}}
</div>

html에서도 마찬가지로 value속성을 통해서 값을 가져오게 됩니다.

또한 기존의 ngModel(formModule에서 제공하는 데이터 바인딩 속성)이 있던 자리에 formControl이라는 속성이 추가 되었습니다.

FormControl 파헤치기

FormControl클래스를 Ctrl + 마우스 클릭하여 해당 클래스의 정의를 살펴보면,

FormControl 클래스는 파라미터를 3개를 받으며, 각각의 파라미터는 or연상으로 여러 형식으로 받을수 있습니다.

또한 FormControlState, ValidatorOrOpts, AsyncValidator 세가지 형태(배열 포함)의 값을 받을수 있다고 되어 있습니다

• FormControlState : 최초에 적용할 태그가 가질 수 있는 데이터를 의미합니다.
• ValidatorOrOpts , AsyncValidator : 유효성 검사를 사용할 때 쓰여집니다.

여기서 ValidatorOrOpts에 해당하는 변수를 적용하여 보겠습니다.

login.component.ts

import { Validators } from '@angular/forms';  //추가하여줍니다.

//..생략
export class LoginComponent implements OnInit {
    pwd = new FormControl('', [ Validators.required, Validators.minLength(4) ]); //폼 컨트롤러 클래스로 바꿉니다.
}

login.component.html

<div>Wellocome</div>
<input type="text" placeholder="id"  [formControl]="id"/>
<input type="text" placeholder="password"  [formControl]="pwd"/>
<button (click)='tryToLogin()'>Login</button>
<div>
    <span  *ngIf="pwd.hasError('minlength') || pwd.hasError('required') ">비밀 번호 {{pwd.value}}는 4자리 이상이어야 합니다.</span>
</div>
<div *ngIf="getMessage" [ngClass]="styleArray">
   {{getMessage}}
</div>

로그인 컴포넌트에서 FormControl에서 첫번째 값인 ‘ ‘ 는 적용할 데이터를 의미하며,

두번째 값은 유효성 검사에 적용할 대상을 의미하고, 배열형식으로 값을 부여하였습니다.

배열형식으로 부여한 형태의 값은 ValidatorFn종류의 타입(ValidatorOrOpts속성이 받는 값)을 의미하며, 앵귤러가 스스로 해당 형태를 확인하고 기능을 부여하여 줍니다.

login컴포넌트에 설정을 하고 난 뒤의 html파일에서는 hasError()라는 함수에 앵귤러에서 정의된 값을 대입하여 유효성 검사여부를 확인하게 됩니다.

앵귤러에서 정의된 유효성 검사에 사용가능한 항목은 maxlength, required, minlength, pattern 등 다양하게 존재합니다.

앵귤러에서의 ReactiveFormsModule은 이러한 Form과 관련한 태그의 기능을 좀 더 다양하고 쉽게 사용할 수 있게 해 줍니다.

tryToLogin함수에 console.log(this.pwd.status)를 추가해서 값을 보면

비밀번호가 4자리 미만일 경우, INVALID 속성이 나오며, 4자리 이상부터 VALID 속성을 반환해 줍니다.

이를 통해서 html파일 뿐만아니라 컴포넌트에서도 값에 대한 다양한 정보를 제공받을수 있으며, 제약조건과 검사를 쉽게 추가할 수 있습니다.

 

참고

https://lts0606.tistory.com/361

앵귤러 튜토리얼(Angular tutorial) - 12 : 데이터 바인딩, 반응형 모듈