Angular すでに存在するのと同じテキストの項目を追加できないようにする

Question

実現したいこと

• 1. すでに存在するのと同じテキストの項目を追加できないようにする

参考になりそうな文献

• https://www.delftstack.com/ja/howto/javascript/javascript-remove-duplicates-from-an-array/

コード

<h1>Todo App</h1>
<form [formGroup]="rForm">
  <div class="form-group registItemArea">
    <div class="input-group">
      <input id="title" class="form-control" placeholder="Title" formControlName="title" />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" (click)="hasDetail = !hasDetail">詳細</button>
      </span>
    </div>
  </div>
  <div class="card card-block card-header" (click)="hasDetail = !hasDetail">
    <div class="form-group">
      <label for="description">
        <strong>詳細:</strong>
      </label>
      <textarea id="text" class="form-control" formControlName="description"></textarea>
    </div>

    <div class="form-group">
      <label for="date">
        <strong>日付:</strong>
      </label>
      <input type="date" class="form-control" formControlName="date" />
    </div>
  </div>
</form>
<div class=" row ">
  <div class="col-sm-2 ">
    <button class="createBtn btn btn-success " [disabled]="this.rForm.invalid" (click)="onSaveTodoItem()">作成</button>
  </div>
</div>
<hr>
<div class="row itemListArea ">
  <div class="col-sm-12">
    <li *ngFor="let item of itemList; let i=index;">
      <div accordion-heading [class.isComplete]="item.isComplete">
        <button class="btn btn-danger" (click)="onUpItem(i)">↑</button>
        <button class="btn btn-danger" (click)="onDownItem(i)">↓</button>
        {{item.title}}
      </div>
      <div>
        <strong>詳細：</strong>
        <pre>{{item.description ? item.description : "-"}}</pre>
      </div>
      <div>
        <strong>日付：</strong>
        <span>{{item.date ? item.date : "-"}}</span>
      </div>
      <div>
        <button class="btn btn-danger" (click)="onDeleteItem(i)">削除</button>
        <button class="btn btn-success" (click)="item.isComplete = !item.isComplete ">{{item.isComplete ? "未完了に戻す" : "完了にする"}}</button>
       
      </div>
    </li>
  </div>
</div>

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

interface TodoItem {
  title: string;
  description: string;
  isComplete: boolean;
  date: any;
}

@Component({
  selector: 'app-form-practice',
  templateUrl: './form-practice.component.html',
  styleUrls: ['./form-practice.component.scss']
})
export class FormPracticeComponent implements OnInit {

    // 詳細が表示されているか
    public hasDetail = false;
    // アイテムリスト
    public itemList: Array<TodoItem> = new Array<TodoItem>();
  
  rForm: FormGroup;
  constructor(protected fb: FormBuilder) {
   }
   ngOnInit() {
    this.createForm();
} 
   createForm(): void {
    // Form の作成と初期値設定をします。
    this.rForm = this.fb.group({
      title: ['',
        [
          Validators.required
        ]
      ],
      description: [''],
      date: [''],
      isComplete: [false]
    });
  }

   // todoItem を 保存します
   onSaveTodoItem(): void {
    const item: TodoItem = {
      title: this.rForm.get('title').value,
      isComplete: false,
      description: null,
      date: null
    };

    if (this.hasDetail) {
      item.description = this.rForm.get('description').value;
      item.date = this.rForm.get('date').value;
    }

    this.itemList.push(item);
    this.clearForm();
    console.log(this.itemList);
  }

    // フォームの値をリセット
    clearForm(): void {
      this.rForm.reset();
    }
  
    // 指定した要素を削除
    onDeleteItem(index: number): void {
      this.itemList.splice(index, 1);
    }

// 指定した要素を上に移動
    onUpItem(index: number): void {
     this.itemList.splice(0, index);
    }
// 指定した要素を下に移動
    onDownItem(index: number): void {
     this.itemList.splice(-1, index);
   }


}

すみませんが、知識をお借りしたいです。

Answer 1

保存する関数ですでに投稿したtitleの中に、これから保存するtitleが含まれたらエラーを返すようにしたらどうでしょうか？

　　　　// form-practice.component.ts
  onSaveTodoItem(): void {
    let title = this.rForm.get('title').value;
    // 入力されたtitleがitemListのtitleだけ取った配列に含まれるかどうか
    if (
      this.itemList.map(item => item.title).findIndex(item => item == title) >=
      0
    ) {
　　　　　　　　　　　　　// ここにエラー表示などの表示エラー処理を書いてreturnする
      return console.log('You Have Posted ' + title);
    }

    const item: TodoItem = {
      title,
      isComplete: false,
      description: null,
      date: null
    };
   ...
  }

動かしたコードです
参考にどうぞ
Angularのバージョンに寄らない部分なので同じ感じで実装できると思います
https://angular-ivy-1athjs.stackblitz.io

Comments

[A4UxdAF799hT6WT]

無事解決できました。ありがとうございます。

Answer 2

Angularのシステム部分はjsと同じ理屈（データのIO）で考えたらいいので、システム内で過去に既存のデータかどうか突き合わせて、既存の場合は処理を行わないようにif文で制御したらいいのではないかと思います。