Angular에서 폼의 초기값을 넣어줄 때 주의해야할 점이 있다.
constructor(public formBuilder: FormBuilder) { | |
this.form = this.formBuilder.group({ | |
a: null, | |
b: 1, | |
c: [2, null], | |
d: [2, someAsyncValidator], | |
e: [], | |
f: [[]], | |
}); | |
} |
폼에서 사용할 FormControlName을 이 곳의 group
에서 넘기는 객체에 미리 선언해야한다. 미리 초기값을 선언한다면 b
와 같이, 선언하고 싶지 않다면 a
와 같이 선언하면 되는 간단한 API 이다.
c
는 조금 다르다. 2를 초기값으로 가지며 배열의 유효성 검사가 없다는 뜻이다, c: [2, null]
은 c: 2
와 동일하다. 이와 비슷하게, d
는 초기값을 2로 가지며, form validation을 someAsyncValidator
를 사용하겠다는 뜻이다. JS와 TS가 언어 수준에서 tuple을 지원하지 않기 때문에 이런 api를 짠 것 같은데, 여기서 헷갈리기 쉬운 부분이 나온다.
결론부터 말해, e: []
는 e: null
또는 e: [null, null]
와 같다.
만약에, validator없이 초기값을 빈 배열로 넣고 싶다면, f: [[]]
와 같은 코드가 필요하다.