- 비밀번호 유효성검사
- 아이디 저장하기 체크박스
- 비밀번호 입력할때 뭐입력했는지 볼수 있게 해주는 체크박스
- 스타일 주기
//비밀번호 유효성검사 조건
6자리 이상일때 ngclass 바뀌는것
숫자
특수문자
영어
- 스타일
-sing up 가운데로 옮기기
- 비밀번호 유효성 검사
// 키입력값에 불리언 값으로 해서 빨간색 스타일 바뀌게 하는 유효성 검사
사용자가 키를 눌렀다가 떼면 이벤트 발생하게 하는 것
html
<input (keyup( = “onkey($event)”/>
ts
유효성검사의 방법을 알아보니 앵귤러에서는 여러가지의 유효성검사 폼이 있다고 한다.
Angular에서 비밀번호의 유효성 검사를 수행하는 방법에는 두 가지 주요한 접근 방식이 있습니다.
- 템플릿 기반 양식(Template-driven forms):
- 템플릿 기반 양식은 Angular의 기본 양식 접근 방식입니다.
- 템플릿 내에서 폼 요소를 직접 지정하고 폼을 만듭니다.
- 유효성 검사를 위해 템플릿에서 Angular의 기본 유효성 검사 지시문(ngModel, ngModelGroup, ngForm 등)을 사용합니다.
- 비밀번호 유효성 검사를 수행하기 위해 템플릿 내에서 Angular의 내장 유효성 검사기 및 사용자 정의 유효성 검사기를 사용할 수 있습니다.
예시:
htmlCopy code
<form #myForm="ngForm">
<input type="password" name="password" ngModel required minlength="6">
<div *ngIf="myForm.controls['password'].invalid && (myForm.controls['password'].dirty || myForm.controls['password'].touched)">
<div *ngIf="myForm.controls['password'].errors.required">
Password is required.
</div>
<div *ngIf="myForm.controls['password'].errors.minlength">
Password must be at least 6 characters.
</div>
</div>
</form>
- 반응형 양식(Reactive forms):
- 반응형 양식은 FormControl, FormGroup 및 FormArray와 같은 프로그래밍 방식을 사용하여 폼을 구축하는 방법입니다.
- 폼 로직은 주로 TypeScript 파일에서 처리됩니다.
- 비밀번호 유효성 검사를 위해 FormControl을 생성하고 유효성 검사기(Validators)를 사용하여 유효성 검사를 수행합니다.
예시:
typescriptCopy code
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-password-form',
templateUrl: './password-form.component.html',
styleUrls: ['./password-form.component.css']
})
export class PasswordFormComponent {
passwordForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.passwordForm = this.formBuilder.group({
password: ['', [Validators.required, Validators.minLength(6)]]
});
}
get password() {
return this.passwordForm.get('password');
}
}
반응형 양식은 일반적으로 더욱 확장 가능하고 유지보수하기 쉽습니다. 하지만 선택은 프로젝트의 요구사항과 개발자의 선호도에 따라 다를 수 있습니다.
Show Validation Error Messages for Reactive Forms in Angular
종원님이 주신것 필수적으로 보기!!
this.formGroup = this.formBuilder.group({
toDo: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(30)]]
});
- formGroup 이란?
Angular에서 리액티브 폼을 구성할 때 사용되는 클래스입니다. 이 클래스는 폼 컨트롤들을 그룹화하고 이를 관리하는 데 사용됩니다. 폼 그룹을 사용하면 관련된 폼 컨트롤들을 논리적으로 묶어서 폼을 구성할 수 있습니다. 이를 통해 유효성 검사 및 데이터 처리 등을 효율적으로 수행할 수 있습니다.
그럼 이걸 쓰려면 html 파일이나 ts 파일엔 어떻게 추가를 해야되는 건가?
//html
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()" class="grow space-y-2">
❓❓❓❓❓
[formGroup]="formGroup" 는 무슨 의미?
Angular의 리액티브 폼에서 폼 그룹을 템플릿과 컴포넌트 사이에 바인딩하는 방법입니다.
formGroup는 컴포넌트 클래스에 선언된 FormGroup 인스턴스입니다. 이것은 폼 그룹을 정의하고 관리하는 데 사용됩니다.[formGroup]는 Angular의 속성 바인딩 구문입니다. 이를 사용하여 컴포넌트 클래스에서 템플릿으로 데이터를 전달할 수 있습니다. 이 경우, 폼 그룹을 템플릿에 전달하여 해당 폼 요소와 연결합니다.
즉, [formGroup]="formGroup"은 템플릿에 폼 그룹을 연결하여 템플릿에서 폼 그룹을 사용할 수 있게 합니다. 이것은 Angular의 데이터 바인딩을 사용하여 컴포넌트 클래스의 폼 그룹 인스턴스와 템플릿 간에 상호작용하는 방법입니다.
“formGroup”인스턴스는 무슨 뜻?
Angular의 리액티브 폼에서 폼 그룹을 표현하고 관리하는 데 사용되는 객체입니다. 이를 통해 여러 입력 필드를 그룹화하고 폼의 유효성을 검사하고 관련 데이터를 추출할 수 있습니다.
(ngSubmit)="onSubmit()"은 뭐야?
(ngSubmit)은 폼이 제출될 때 발생하는 이벤트를 나타냅니다.
이 제출되면 onSubmit() 메서드가 호출되어야 합니다. 이 메서드는 일반적으로 폼 데이터를 처리하고 유효성 검사를 수행하는 로직을 포함하게 됩니다. 이벤트 핸들러인 onSubmit() 메서드는 해당 컴포넌트 클래스에 구현되어야 합니다.
//ts
import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms";FormBuilder는 뭐야?
Angular 폼을 쉽게 생성하기 위한 유틸리티 클래스입니다. 이 클래스는 Angular의 리액티브 폼을 구축할 때 사용됩니다. 주로 폼 그룹과 폼 컨트롤을 생성하는 데 사용되며, 폼을 동적으로 생성하고 유효성 검사 규칙을 쉽게 적용할 수 있도록 도와줍니다.
FormBuilder를 사용하면 복잡한 폼 구성을 보다 간단하게 만들 수 있으며, 컴포넌트 클래스에서 폼을 정의하고 관리하는 로직을 줄일 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성이 향상됩니다.
ReactiveFormsModule 은 뭐야?
ReactiveFormsModule는 Angular에서 제공하는 모듈 중 하나로, 리액티브 폼을 구현하는 데 사용됩니다. 리액티브 폼은 Angular의 기능 중 하나로, 데이터와 뷰를 동기화하는데 사용됩니다. 이는 데이터가 변경되면 뷰가 자동으로 업데이트되며, 사용자 입력이 있으면 데이터 모델도 업데이트되는 양방향 바인딩을 제공합니다.
ReactiveFormsModule은 리액티브 폼을 사용하기 위해 필요한 모든 기능과 서비스를 포함하고 있습니다. 주로 FormGroup, FormControl, Validators 등의 클래스 및 유틸리티 함수를 제공합니다.
주요 기능은 다음과 같습니다:
FormGroup: 여러 폼 컨트롤을 그룹화하고 관리하는데 사용됩니다. 여러 폼 컨트롤을 하나의 논리적 단위로 묶을 수 있습니다.FormControl: 폼 요소를 나타내는데 사용됩니다. 각 폼 요소의 값을 추적하고 유효성 검사를 수행합니다.Validators: 폼 요소에 대한 유효성 검사 규칙을 제공합니다. 예를 들어, 필수 필드 여부, 최소/최대 길이, 이메일 형식 등을 확인할 수 있습니다.- 서비스 및 디렉티브: 유효성 검사, 템플릿 제어 및 사용자 입력을 관리하기 위한 서비스 및 디렉티브를 제공합니다.
Validators 은 뭐야?
Validators는 Angular의 리액티브 폼에서 사용되는 클래스로, 폼 요소에 대한 유효성 검사를 정의하기 위해 사용됩니다. 이 클래스는 다양한 유효성 검사 규칙을 제공하여 사용자가 입력한 데이터의 유효성을 검사할 수 있게 합니다.
일반적으로 Validators 클래스는 다음과 같은 유효성 검사 규칙을 제공합니다:
required: 필수 필드 여부를 확인합니다. 이 규칙을 사용하면 사용자가 해당 필드에 값을 입력하지 않으면 유효성 검사 오류가 발생합니다.minLength(length: number): 입력한 값의 최소 길이를 설정합니다. 이 규칙을 사용하면 사용자가 입력한 값의 길이가 지정된 최소 길이보다 짧으면 유효성 검사 오류가 발생합니다.maxLength(length: number): 입력한 값의 최대 길이를 설정합니다. 이 규칙을 사용하면 사용자가 입력한 값의 길이가 지정된 최대 길이보다 길면 유효성 검사 오류가 발생합니다.pattern(pattern: string | RegExp): 입력한 값이 지정된 패턴과 일치하는지 확인합니다. 정규 표현식을 사용하여 사용자 입력을 패턴과 비교하고 일치하지 않으면 유효성 검사 오류가 발생합니다.email: 입력한 값이 유효한 이메일 주소인지 확인합니다. 이 규칙을 사용하면 사용자가 올바른 이메일 형식을 입력하지 않으면 유효성 검사 오류가 발생합니다.- 기타 다양한 유효성 검사 규칙:
min,max,requiredTrue등의 다양한 유효성 검사 규칙이 있습니다. 각 규칙은 다른 유효성 검사를 수행합니다.
Validators 클래스를 사용하여 폼 요소에 대한 유효성 검사 규칙을 정의하면 Angular가 자동으로 해당 규칙을 적용하고 사용자 입력의 유효성을 확인합니다. 이를 통해 애플리케이션에서 사용자가 입력한 데이터의 일관성을 유지할 수 있습니다.
<유효성 검사 반응형 예시 공부>
- 이메일 유효성 검사
조건 - 사용자가 이메일 주소를 입력하는 양식을 구현 , 이메일 필드는 필수 필드이며, 올바른 이메일 형식을 가져야함. 유효하지 않은 이메일 형식이 입력되면 사용자에게 오류 메시지가 표시됩니다.
<form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
<input type="email" formControlName="email">
<div *ngIf="emailForm.get('email').invalid && emailForm.get('email').touched">
<div *ngIf="emailForm.get('email').errors.required">Email is required.</div>
<div *ngIf="emailForm.get('email').errors.email">Invalid email format.</div>
</div>
<button type="submit" [disabled]="emailForm.invalid">Submit</button>
</form>
//[formGroup]="emailForm"과 (ngSubmit)="onSubmit()"은 Angular의 템플릿 문법을 사용하여 폼을 바인딩하고 제출 이벤트를 처리하는 부분입니다.
[formGroup]="emailForm": 이 부분은 템플릿에서 폼 그룹을 지정하는 것입니다. Angular의 폼 기능을 사용할 때, 폼 그룹은 컴포넌트 클래스에 정의된 FormGroup 객체와 연결됩니다. [formGroup] 디렉티브는 이 폼 그룹을 템플릿에 연결하여 템플릿에서 폼을 사용할 수 있게 합니다. 여기서 emailForm은 컴포넌트 클래스에서 정의된 폼 그룹 객체입니다.
(ngSubmit)="onSubmit()": 이 부분은 폼이 제출될 때 실행할 메서드를 지정하는 것입니다. (ngSubmit) 이벤트는 폼이 제출될 때 트리거되는 이벤트입니다. 이를 사용하여 폼 제출을 처리하고 원하는 로직을 실행할 수 있습니다. 여기서 onSubmit()은 컴포넌트 클래스에 정의된 메서드로, 폼 제출 이벤트가 발생할 때 호출됩니다.
따라서 [formGroup]="emailForm"은 템플릿에 폼 그룹을 바인딩하고, (ngSubmit)="onSubmit()"은 폼 제출 이벤트를 처리하는데 사용됩니다. 이 두 가지를 함께 사용하면 Angular 템플릿에서 폼을 쉽게 처리하고 제출할 수 있습니다.
//
formControlName="email"은 Angular 템플릿 기반 폼에서 사용되는 디렉티브입니다.
이 디렉티브는 템플릿에서 폼 컨트롤을 정의하고 해당 컨트롤과 템플릿 요소를 바인딩합니다.
formControlName: 이 디렉티브는 템플릿에서 폼 컨트롤을 지정하는데 사용됩니다.
Angular의 폼 기능을 사용할 때, 폼 컨트롤은 컴포넌트 클래스에 정의된
FormControl 객체와 연결됩니다. formControlName 디렉티브는 이 폼 컨트롤을 템플릿에 연결하여
템플릿에서 해당 컨트롤을 사용할 수 있게 합니다.
이 경우 "email"은 폼 컨트롤의 이름을 나타냅니다.
formControlName="email"은 이메일 입력 필드를 템플릿에 정의하고,
해당 필드를 Angular의 폼 컨트롤과 연결합니다.
이를 통해 Angular는 사용자의 입력을 폼 컨트롤에 연결하고,
폼 컨트롤의 상태를 자동으로 추적할 수 있습니다.
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-email-form',
templateUrl: './email-form.component.html',
styleUrls: ['./email-form.component.css']
})
export class EmailFormComponent {
emailForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.emailForm = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]]
});
}
onSubmit() {
if (this.emailForm.valid) {
// 폼 제출 시 수행할 로직 작성
}
}
//FormBuilder를 사용하여 폼 그룹을 생성합니다. 이 폼 그룹은 이메일을 입력하는 데 사용됩니다.
email 폼 컨트롤은 비어 있는 문자열로 초기화됩니다.
Validators를 사용하여 email 필드에 대한 유효성 검사 규칙을 설정합니다. 여기서는 필수 입력 필드이고, 유효한 이메일 주소 형식이어야 합니다.
이렇게 생성된 폼 그룹을 사용하여 템플릿에서 폼을 바인딩하고 유효성을 검사할 수 있습니다.
//this.formBuilder.group() -> formbuilder 서비스를 사용하여 폼 그룹을 생성하는 매서드
코드를 간결하게 유지 폼을 동적으로 구축 할수 있음
group() 메서드는 폼그룹을 생성하고 초기값을 설정함. 폼그룹에 포함될 컨트롤들을 객체 형태로 전달
>> email 폼 컨트롤을 생성하고 폼 그룹에 추가하기 위해서 아래와 같이 사용할수 있음
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// FormBuilder를 사용하여 폼 그룹 생성
this.formBuilder.group({
// email 폼 컨트롤 생성
email: [
// 초기값 설정
'',
// 유효성 검사 규칙 설정
[Validators.required, Validators.email]
]
});
