9. Validation
Angular入門 未経験から1ヶ月でサービス作れるようにする その8. バリデーション - Qiita
Angularにおけるバリデーションの基礎を解説していきます。 今回は、 バリデーションの使い方 Angularのビルトインバリデーションの種類 をやっていきます。 前回の振り返り 前回は、Angularの
qiita.com
product-edit.component의 name 을 필수로 입력해야하는 validation(유효성 검사)을 추가해보겠다.
html에 아래 코드를 추가한다.
ts에 아래 코드를 추가한다.
이건 getter다. 메서드가 아닌 것처럼 ()없이 호출할 수 있다.
그렇기때문에 HTML에서 읽을때 name으로만 부를 수 있다.
이 productForm.get('name')에서 취득할 수 있는 것은 FormControl 클래스의 인스턴스다.
name의 <input>에 required이라는 속성을 추가했다. 이에따라 이 항목이 필수로 요구된다는 validation을 활성화시킨다.
- 다음행에서 name.invalid는 name의 validation에 하나라도 위반되면 true를 반환한다.
- name.dirty는 name요소가 변경되면 true를 반환한다.
- name.touched은 name 요소가 들어있는 <input>의 blur이벤트 발화시에 true가 된다. (한번 <input>태그에 포커스를 맞추고 떨어지면)
위 3가지를 이용하여 이 <div>는 name에 아무것도 입력되지 않은 상태가 되는 한편, 사용자가 입력내용에 변경한다거나 한번 포커스를 넣고 떨어졌을 때에 내용이 표시되게 된다.
name.dirty || name.touched 를 쓰는 이유는 등록폼에 아무것도 입력하지 않은 초기 시점부터 에러표시가 나타나면 사용자에게 불쾌한 표시가 될 수 있기 때문이다.
name(FormControl클래스의 인스턴스)가 invalid가 되면(유효성에 어긋나면) name.errors를 위반한 validation을 키로 가지는 정보가 생성된다. 이번에는 required validation을 사용하고있기때문에 name.errors.required가 true로 되어있다.
class = alert?
편집화면에 다른 validation을 추가해보자
- name는 최대 50자 까지
- price는 필수입력
- price는 100 이상
1. html 작성
validation(검증)이 추가됐기때문에 name이 50자를 넘으면 name.errors.maxlength에 값이 들어간다.
구체적으로는 {requiredLength: 50, actualLength:52}와 같은 값이 들어있기때문에 이런정보를 가지고 메세지를 만들고싶을때 값을 취득하여 만들면 된다.
2. typescript 에 get price() 작성
3. price 100이상 validation 추가
이 validation은 지금까지와 조금 다르다.
<input>태그에 속성으로 추가하여 사용할수 있는 validation은 기본적으로 HTML5에 정의되어있는것 뿐이고,
그 외에는 직접 디렉티브(지시자)를 만들거나 Typescript측에서 validation설정을 해야한다.
4. scss에 .alert 추가
validation이 모두 OK일때 저장되도록 하기
validation에러가 나는 경우 화면에 표시되도록 했으나 지금까지 구현한 내용은 에러표시가 있어도 저장버튼을 누르면 저장이 된다.
validation에러가 모두 해제되어야 저장버튼이 enable 되도록 해보자.
1. ts에서 saveProduct()수정
this.productForm.valid은 FormGroup가 가진 모든 FormControl의 validation에러가 없을경우에 true가 반환된다.
반대로 invalid는 false가 된다. 당!연!
이 추가코드로 validation 에러가 있는 경우 아무것도 못하도록되었다.
2. html 수정-HTML에 클래스 지정
[class.어쩌구] = ”something” 는 something부분이 true를 리턴하면, 이 요소에 어쩌구라는 class가 추가된다는 의미다.
적용하면, this.productForm.invalid가 true면 disabled클래스가 부여되도록한다는 의미다.
disabled 클래스는 scss에 추가한다.
3. scss 수정-disabled 클래스 추가
배경을 회색으로 하고, 클릭이벤트등을 받지않도록 한다.
이로인해 validation 에러시에는 저장이 불가능해졌다.
Typescript코드의 필요성
HTML, scss를 변경하는 것만으로 validation에러가 있으면 버튼을 누를수 없게 되었다.
그래서 typescript측의 수정은 필요없을것 같지만 사실은 필요하다.
Form안에 <input>요소에서 Enter를 누르면, Form이 전송되어버린다. 그때문에 버튼은 비활성화 됐더라도 saveProduct()메소드가 불릴수 있기때문에 typescript측의 제어도 필요하다.
Angular의 built-in Validation
파라미터 / 역할 / 속성으로 지정가능한지?
| min(number) | 최소치 검증 | x |
| max(number) | 최대치 검증 | x |
| required | 필수 검증 | ◯ |
| requiredTrue | true 필수 검증（체크박스 등에서 사용） | x |
| 메일주소 포맷 검증 | x | |
| minLength(number) | 최소문자 개수 검증 | ◯ |
| maxLength(number) | 최대문자 개수 검증 | ◯ |
| pattern(regex) | 정규표현 일치여부 검증 | ◯ |
Validation을 여러개 사용할 경우 - compose메서드
