angular form 개념

template :`

<form [formGroup]="formModel" (ngSubmit)="onSubmit()">

<label>Emails</label>

<button type="button" (click)="addEmail()">Add Email</button>

<ul formArrayName="emails">

<li *ngFor="let e of formModel.get('emails').controls; let i=index;">

<input [formControlName]="i">

</li>

</ul>

<button type="submit">Submit</button>

</form>

<hr>

<label>Form Value : </label>

<pre>{{value}}</pre>

`

})

class AppComponent{

formModel : FormGroup = new FormGroup({

emails : new FormArray([

new FormControl()

])

})

get value(){

return JSON.stringify(this.formModel.value, null,4);

}

addEmail(){

const emails = this.formModel.get('emails') as FormArray;

emails.push(new FormControl());

}

onSubmit(){

console.log(this.formModel.value);

}

}

formControl 은 폼의 입력필드나 멤버? 머이런것의 최소단위같다.

formGroup은 컴포넌트클래스내에 선언 특정 변수로 선언해서

폼태그의 전체 스코프를 변수로 사용할수 있는것같고

formArray는 말그대로 가변적인 입력필드를 묶을때 사용하는듯하다.

한번 읽을때 도대체 무슨소린지 졸면서 읽었는데 다시읽으니까 어느정도

윤곽이 잡힌다 한번더읽으면 좀더 이해할수 있을것같다.

아둔함을 느끼게된다 ;;

출처 : Angular with typescript Development