제대로 조건이 안 맞게 되는 것 같음

두번 돌게 되고

유효성 검사가 안되고 있음

>>수정전

//비밀번호 유효성 검사 폼
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div>
    <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
        class="text-danger"
        [ngClass]="{'text-red-700 font-bold' : passwordInvalid 
      }"
      >
        *비밀번호는 영어, 숫자, 특수문자를 포함한 6자리 으로 설정해주세요
      </h6>
      <button (click)="onSubmit()">확인</button>
    </div>
  </div>
</form>

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

@Component({
  selector: 'app-signup-form',
  templateUrl: './signup-form.page.html',
  standalone: true,
  imports: [CommonModule, FormsModule, ReactiveFormsModule],
})
export class SingupFormPage {
  //   private readonly fb = inject(FormBuilder);
  formGroup!: FormGroup;
  brand_pw_Value: string = '';
  passwordInvalid: boolean = false;
  passwordValid: boolean = false;
  //비밀번호 폼을 작성함 조건이 있는 영어 숫자 특수문자를 포함한 6자리

  ngOnInit(): void {}
  constructor(private formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      password: [
        '',
        [
          Validators.required,
          Validators.minLength(6),
          Validators.maxLength(12),
          Validators.pattern(
            /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6}$/
          ),
        ],
      ],
    });
  }
  // 폼을 제출 했을때
  onSubmit() {
    // console.log(this.brand_pw_Value);
    if (this.formGroup.invalid) {
      alert('알맞지 않은 형식입니다. ');
    } else {
      console.log('맞음');
    }

    // 정규식에 맞지 않는지 여부를 확인 .test() 메서드는 주어진 문자열이 정규식에 맞는지 여부를 불리언 값으로 반환함
    //! 연산자를 사용하여 정규식에 맞지 않는 경우 'true'를 반환
    // this.passwordInvalid =
    //   !/^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6}$/.test(
    //     this.brand_pw_Value
    //   );
    // // invalid가 참이면 valid를 거짓으로 설정 그렇지 않으면 참으로 설정
    // //=> 비밀번호가 유효하지 않으면 valid가 거짓이 되고 유효하면 참
    // this.passwordValid = this.passwordInvalid ? false : true;
    // console.log(this.brand_pw_Value);
    // if (this.formGroup.invalid) {
    //   console.log('안맞음');
    // }
  }
}

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

//   const red = FormGroup.get('password').invalid &&(FormGroup.get('password').dirty || formGroup.get('password').touched)
// }

//   else (this.formGroup.valid){
//       const correct =formGroup.get('password').valid && (formGroup.get('password').dirty || formGroup.get('password').touched)
//   }
// }

>>수정후

오류가 그파일에만 안되고 다른 것들은 되서

우선 종원님이 주신거 다른 파일에서 다시 해봤더니 됨

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <input type="password" formControlName="password" />
  <button>제출</button>
</form>

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

const PW_PATTERN =
  /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;

@Component({
  selector: 'app-validator',
  standalone: true,
  imports: [ReactiveFormsModule],
  templateUrl: './validator.component.html',
  styleUrl: './validator.component.scss',
})
export class ValidatorComponent {
  formGroup!: FormGroup;

  constructor(private readonly fb: FormBuilder) {
    this.formGroup = this.fb.group({
      password: ['', [Validators.required, Validators.pattern(PW_PATTERN)]],
    });
  }

  onSubmit() {
    console.log(PW_PATTERN.test(this.formGroup.get('password')!.value));

    if (this.formGroup.invalid) {
      console.log('안 맞음');
      return;
    }
    console.log(this.formGroup.value);
  }
}