Angular 형식에 대한 진실

소개

이 기사에서는 Angular Forms 지시문을 올바른 방법으로 사용하는 방법을 설명하고 싶습니다. 왜냐하면 올바르게 사용하는 방법이 명확하지 않거나 템플릿 양식 사용에 대한 차이점이 무엇인지 확인하고 FormBuilder 클래스로 자체 양식을 구축했기 때문입니다. . 나는 단지 흥미로운 것들을 설명하고 싶을 뿐입니다.

설명

아주 간단한 것부터 시작하겠습니다. 하지만 이것에 대해서는 의심스러울 수 있습니다.

질문은 다음과 같습니다. <form #f="ngForm" ...을 사용하면 어떻게 됩니까?

누군가는 우리가 우리의 형태를 참조하고 있다고 생각할 수 있습니다. 이것이 사실일 수도 있지만 실제로는 더 많은 일들이 뒤에서 일어나고 있습니다.

이것에 대한 진실은 FormsModule을 자동으로 가져올 때 NgForm이 우리 보기에서 사용 가능하다는 것입니다. 이것은 NgForm이 우리 보기에서 <form>에 자동으로 첨부되고 속성으로 ngForm을 명시적으로 추가할 필요가 없다는 것을 의미합니다.

제기된 질문에 답하면 실제로 #f="ngForm" 태그에 form을 사용하면 FormGroup이 생성됩니다! 여기서 f 은 FormGroup 유형입니다. 이것은 이 구문이 이 뷰에 대한 로컬 변수를 생성하기를 원하지만 ngForm은 어디에서 왔습니까? 그것은 NgForm 지시문에서 왔습니다.

이 순간에 f 변수는 FormGroup 이라고 생각할 수 있습니다. FormGroup 은 FormControls 으로 구성되어 있으며 우리 양식의 어디에 있습니까? 이제 NgModel 지시문이 실행됩니다.

속성 vslue 없이 ngModel을 사용할 때 우리는 처음에 단방향 데이터 바인딩을 원한다고 지정하고 있으며 이는 이 양식에 name 속성과 이름이 같은 FormControl을 생성하는 것이 중요합니다. NgModel은 부모 FormControl에 자동으로 추가되는 새로운 FromGroup을 생성합니다.

이제 다음과 같이 양식을 작성할 수 있습니다.

<!-- Creates a FormGroup-->
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <!-- Creates a FormControl with name email -->
  <input name="email" type="email"  ngModel >
  <!-- Creates a FormControl with name password -->
  <input name="password" type="password" ngModel >
</form>

결론

이 간단한 방법으로 템플릿 양식을 사용하여 Angular에서 유효한 양식을 만들 수 있지만 이 방법으로 양식을 만들면 몇 가지 제한이 있습니다. 예를 들어 비밀번호 입력의 유효성을 검사하려는 경우 어떻게 되는지, FormControls에 대한 유효성 검사기를 지정할 수 없으며 둘 다 할 수 없습니다. 폼 이벤트를 듣습니다. 특별한 일을 하고 싶지 않다면 템플릿 양식이 훌륭한 솔루션이 될 수 있습니다.