HOHO - <KIOSK> 240404 비밀번호 유효성 폼 작성

private readonly fb = inject(FormBuilder);

1. 키워드 분석:

• private: 이 키워드는 속성의 접근성을 정의합니다. 이 경우 private는 속성에 컴포넌트 클래스 자체 내에서만 접근할 수 있고 컴포넌트 외부에서는 접근할 수 없음을 의미합니다.
• readonly: 이 키워드는 속성을 읽기 전용으로 설정합니다. fb에 값을 할당한 후에는 컴포넌트 수명 주기 동안 변경할 수 없습니다. 이는 일관성을 유지하고 실수로 수정하는 것을 방지하는 데 도움이 됩니다.
• fb: 이는 속성에 대해 선택한 이름입니다. FormBuilder의 약자로 fb를 사용하는 것은 일반적인 관행입니다.

2. 값 할당:

• = inject(FormBuilder);: 이 부분은 Angular의 의존성 주입 메커니즘을 사용하여 fb 속성에 값을 할당합니다.
  • inject(FormBuilder);: 이것은 FormBuilder 서비스를 컴포넌트 클래스에 주입합니다. FormBuilder 서비스는 Angular 반응형 폼에서 FormGroup 및 FormControl 객체를 생성하는 데 필수적입니다.

3. 요약:

이 코드는 컴포넌트에 주입된 FormBuilder 서비스에 대한 참조를 보관하는 fb라는 개인, 읽기 전용 속성을 생성합니다. 이 fb 속성은 컴포넌트 전체에서 Angular 반응형 폼을 구축하는 데 사용됩니다.

4. readonly 사용의 장점:

• 실수로 수정 방지: 속성을 readonly로 만들면 FormBuilder 서비스에 대한 참조가 실수로 변경되어 예상치 못한 동작이 발생하는 것을 방지할 수 있습니다.
• 코드 명확성 향상: 이 속성의 값을 초기화 후 변경해서는 안 된다는 것을 명확하게 나타냅니다.

5. 결론:

이 코드 조각은 반응형 폼을 사용하는 Angular 컴포넌트에서 일반적으로 사용되는 관행입니다.

---

Angular 비밀번호 조건에 따른 동적 CSS 적용을 get('폼컨트롤이름').dirty 와 touched로는 할수 없어?

네, Angular에서 비밀번호 조건에 따른 동적 CSS 적용을 get('폼컨트롤이름').dirty 와 touched만으로는 완벽하게 구현하기 어려울 수 있습니다.

이유:

• dirty는 사용자가 폼 컨트롤 값을 변경했는지 여부만 확인하며, 유효성 검사 결과를 나타내지 않습니다.
• touched는 사용자가 폼 컨트롤과 상호 작용했는지 여부만 확인하며, 유효성 검사 조건을 충족했는지 여부는 알려주지 않습니다.

따라서:

• 유효성 검사 결과를 함께 고려해야 정확한 동적 CSS 적용이 가능합니다.

<form [formGroup]="formGroup" (ngSubmit)="vaildatePassword()">

    <div id="brand_pw" class="py-6 mx-1 flex flex-col">
        <input
          class="placeholder: text-slate-400 space-y-2 w-[465px] h-[56px] rounded-2xl placeholder: pl-4"
          type="password"
          placeholder="비밀번호를 입력해주세요."
          [(ngModel)]="brand_pw_Value"
          formControlName="password"
          
        />
        <h6 [ngClass]="{'text-red-700 font-bold' : passwordInvalid
      }" >
          *비밀번호는 영어, 숫자, 특수문자를 포함한 6자리 으로 설정해주세요
        </h6>
</form>

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormsModule,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'app-signup-form',
  templateUrl: './signup-form.page.html',
  standalone: true,
  imports: [CommonModule, FormsModule],
})
export class SingupFormPage {
  red: boolean = false;

  private readonly fb = inject(FormBuilder);
  formGroup!: FormGroup;
  brand_pw_Value: string = '';
  passwordInvalid: boolean = false;
  passwordValid: boolean = false;
  //비밀번호 폼을 작성함 조건이 있는
  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.fb.nonMullable.group({
      password: [
        '',
        [
          Validators.required,
          Validators.minLength(6),
          Validators.pattern(
            /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6}$/
          ),
        ],
      ],
    });
  }
  vaildatePassword() {
    this.passwordInvalid =
      !/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6}$/.test(
        this.brand_pw_Value
      );

    this.passwordValid = this.passwordInvalid ? false : true;
  }

    // onSubmit() {
    //   if (this.passwordInvalid){
    //     //폼이 유효하지 않은 경우에 실행되는 로직
    //       //글자가 빨강색으로 변하기

        
    // }