Angular에서 폼의 초기값을 넣어줄 때 주의해야할 점이 있다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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: [[]] 와 같은 코드가 필요하다.