Angular-Form

1. HTML Form을 Angular에게 알려주어야한다.
2. FormsModule 을 import해주어야 한다.

1. Form 제출하는 방식

Form Element를 출력할 수 있다.
app.component.html

<form (ngSubmit)="onSubmit(f)" #f>

app.component.ts

onSubmit(f:HTMLElement){
  console.log(f);
}

하지만, 이것은 Angular에 의해 생성된 JavaScript 객체가 아니다.

2. ngForm을 이용하여 제출하는 방식

Angular에 의해 자동으로 생성된 JavaScript 객체에 대한 폼에 엑세스 하는 방법이다.
app.component.html

<form (ngSubmit)="onSubmit(f)" #f="ngForm">

app.component.ts

onSubmit(form:NgForm){
  console.log(form);
  // console.log("submit")
}

대신 엥귤러에게 Angular Form에게 알려줘야한다 그래서

<input 
  type="email" 
  id="email" 
  class="form-control"
  ngModel
  name="email"
>

ngModel을 써줘야한다.

NgFrom 객체

dirty

해당 폼에서 무언가를 변경했기 때문에 true 등 판별하는 속성이다.

Disabled

폼이 어떤 이유로 비활성화된 경우 true이고

invalid

유효성 검사기를 추가하지 않았기 때문에 false이다.
그것은 invalid가 아니라 실제로 valid이다.
사진에도 유효한 속성이 있으므로 폼은 현재 유효하다.
ex) 예를 들어 유효한 이메일 주소를 입력해야 하는지 확인하기 위해 밸리데이터를 추가하는 방법

ViewChild로 Form에 접근하는 방법

<form (ngSubmit)="onSubmit()" #f="ngForm">

  @ViewChild('f') signupForm : NgForm;

  suggestUserName() {
    const suggestedName = 'Superuser';
  }
  onSubmit(){
    console.log(this.signupForm);
  }

onSubmit에 인자를 전달하지 않고도 동일한 폼에 엑세스할 수 있다.

이 방식은 폼을 제출하는 시점뿐만 아니라 그 전에 폼에 액세스해야 하는 경우에 특히 유용하다.

폼 상태

<form (ngSubmit)="onSubmit()" #f="ngForm">
  ....
<button 
   class="btn btn-primary" 
   type="submit"
   [disabled]="!f.valid"
>Submit</button>

[disabled]=true이면 비활성화 된다.
[disabled]=false이면 활성화가 된다.