HOHO - <KIOSK> 240412-회원가입 서비스 파일 작성

HTML

//html
<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <input
    type="text"
    placeholder="아이디를 입력해주세요"
    formControlName="brandId"
  />
  <!-- <button type="button" (click)="back()">&larr;</button> -->
  <input
    type="password"
    formControlName="brandPw"
    placeholder="비밀번호를 입력해주세요."
    class="py-6 mx-auto flex items-center placeholder: text-slate-400 space-y-2 w-[465px] h-[56px] rounded-2xl placeholder: pl-4"
  />

  <h6>*비밀번호는 영어, 숫자, 특수문자를 포함한 6자리로 설정해주세요</h6>
  @if((formGroup.dirty && formGroup.touched)){
  @if(passwordCtrl?.errors?.['required']){
  <h6 class="font-black">비밀번호 입력해 주세요.</h6>
  }@else if(passwordCtrl?.errors?.['minlength']){
  <h6 class="font-black">비밀번호 최소6자리 이상 입력해 주세요.</h6>
  } }
  <label><input type="checkbox" />비밀번호 보기 </label>
  <button
    class="ml-5 p-2 rounded-sm bg-lime-950 text-white text-center justify-items-center w-[400px]"
  >
    제출
  </button>
</form>

//ts
import { Component, Output, inject, EventEmitter, OnInit } from '@angular/core';
import { FormControl, FormControlName, FormsModule } from '@angular/forms';
import {
  FormBuilder,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { SignService } from '../../signup.services/sign.service';
import { CommonModule } from '@angular/common';

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

interface userData {
  brandId: string;
  brandPw: string;
}
@Component({
  selector: 'app-home-singup',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule, CommonModule],
  templateUrl: './home-singup.page.html',

})
export class HomeSingupComponent implements OnInit {
  private readonly signService = inject(SignService);
  formGroup!: FormGroup;
  customer: userData[] = [];

  constructor(private readonly formBuilder: FormBuilder) { }
  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      brandId: ['', [Validators.required]],
      brandPw: [
        '',
        [
          Validators.required,
          Validators.pattern(PW_PATTERN),
          Validators.minLength(4),
          Validators.maxLength(12),
        ],
      ],

    }
    );
  }
  get passwordCtrl() {
    return this.formGroup.get('brandPw');
  }

  onSubmit() {

    const { brandId, brandPw } = this.formGroup.value;
    this.customer.push({ brandId, brandPw });
    this.signService.createProfile({ brandId, brandPw });
    if (this.formGroup.invalid) {
      alert('폼을 다 채워주세요 ')
      console.log(this.formGroup.get('brandPw')?.value);
      return;

    }
    else {
      const lastValue = this.customer[this.customer.length - 1];
      return console.log(lastValue.brandId, lastValue.brandPw);
    }

  }

TS

//sign.service.ts
import { Injectable, Input } from '@angular/core';
import { userData } from '../pages/model/signup.model';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class SignService {
  @Input() formGroup!: FormGroup;
  profiles: userData[] = [];
  id = 1
  //사용자등록>> 사용자 정보를 추가하는 메서드
  createProfile(profile: {
    brandId: string;
    brandPw: string;
  }) {
    const newProfile: userData = {
      id: this.id++,
      brandId: profile.brandId,
      brandPw: profile.brandPw
    };
    this.profiles.push(newProfile);

  }