HOHO -240408 todo 유효성 복습

//ngModel import-> formsModule
<div>
  <input type="text" placeholder="입력하시오" [(ngModel)]="inputValue" />
  <button (click)="addtodo()">추가</button>
  <div>
    <ul>
      @for (list of todos; track list.id) {
      <li>{{ list.id }} | {{ list.name }}| {{ list.text }}</li>

      <button (click)="listDelete(list)">삭제</button
      >}
    </ul>
  </div>

  <input
    type="text"
    id="sign_id"
    placeholder="아이디를 입력하시오."
    [(ngModel)]="inputValue"
  />
  <h6>*중복확인 버튼을 눌러 주세요</h6>
  <button (click)="check()">중복확인</button>
  <form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
    <input type="password" formControlName="password" placeholder="비밀번호를 입력해주세요">
    
    
  </form>
</div>

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

type Input = {
  id: number;
  name: string;
  text: string;
}

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

@Component({
  selector: 'app-validator',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule, FormsModule],
  templateUrl: './validator.component.html',

})
export class ValidatorComponent {
  inputValue: string = '';
  formGroup!: FormGroup;

  todos: Input[] = [
    {
      id: 0,
      name: this.inputValue,
      text: '안녕'
    }
  ];

  addtodo() {
    const lasttodo = this.todos[this.todos.length - 1].id

    const newTodo = {
      id: lasttodo + 1,
      name: this.inputValue,
      text: '내용'
    }
    this.todos.push(newTodo);
    this.inputValue = '';
  }

  listDelete(todos: Input) {
    this.todos = this.todos.filter((item) => (item.id !== todos.id));
  }

  check() {
    const double = this.todos.find((todos) => (todos.name === this.inputValue));
    if (!double) {
      alert('사용가능한 아이디 입니다.')
    }
    else {
      alert('중복된 아이디 입니다. ')
    }
  }

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

  }

  onSubmmit() {
    console.log(PW_PATTERN.test(this.formGroup.get('password')!.value));
    if (this.formGroup.invalid) {
      console.log
    }
    
  }

}