profile.component.html
<form [formGroup]="editProfileForm" class="profile_input" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Name</mat-label>
<input class="data-input" type="text" matInput formControlName="name" autocomplete="text">
<mat-error *ngIf="editProfileForm.controls['name'].hasError('required')">
name is required.
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>New Password</mat-label>
<input type="password" matInput formControlName="password" autocomplete="password">
<mat-error
*ngIf="editProfileForm.controls['password'].hasError('minlength') || editProfileForm.controls['password'].hasError('maxlength')">Password is required</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Confirm Password</mat-label>
<input type="password" matInput formControlName="confirmPassword" autocomplete="password">
<mat-error *ngIf="editProfileForm.controls['confirmPassword'].hasError('minlength') || editProfileForm.controls['confirmPassword'].hasError('maxlength')">ConfirmPassword is required</mat-error>
</mat-form-field>
<mat-error
*ngIf="editProfileForm.errors?.['PasswordNoMatch'] && (editProfileForm.touched || editProfileForm.dirty)">
password does not match
</mat-error>
<button class="submitBtn" mat-flat-button (click)="onSubmit()">Edit</button>
</form>
profile.component.ts
fb = inject(FormBuilder);
editProfileForm: FormGroup = this.fb.group({
name: new FormControl('', [Validators.required]),
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', [
Validators.required,
Validators.minLength(4),
Validators.maxLength(15),
]),
confirmPassword: new FormControl('', [
Validators.required,
Validators.minLength(4),
Validators.maxLength(15),
]),
},
{ validators: confirmPasswordValidator }
);
confirm-password.validator.ts
import {
AbstractControl,
ValidationErrors,
ValidatorFn,
} from '@angular/forms';
export const confirmPasswordValidator: ValidatorFn = (
control: AbstractControl
): ValidationErrors | null => {
const password = control.get('password')?.value;
const confirmPassword = control.get('confirmPassword')?.value;
console.log(password, confirmPassword)
console.log(password === confirmPassword)
return password === confirmPassword
? null
: { PasswordNoMatch: true };
};
profile.service.ts
// 프로필 정보 업데이트하기
updateProfile(formData: any): Observable<HttpResMsg<any>> {
return this.http.patch<HttpResMsg<any>>(
this.baseUrl + '/admin/profileChange',
formData
);
}
