質問編集履歴

根本変更いたしました。

2021/08/22 11:25

投稿

A4UxdAF799hT6WT

スコア5

test CHANGED Viewed

	@@ -1 +1 @@
1	- Angular~~のDragDropModule~~を~~使ってTodo~~リ~~ストを~~移動~~したい~~
1	+ Angular 項目を並べ替えるボタンを追加する (↑↓ボタンをクリックで、項目が前後に移動する)

test CHANGED Viewed

@@ -4,55 +4,135 @@
-## 詰まっているところ
+## 仮説
-- Reactive Forms を利用して実装をしつつ、DragDropの渡し方、動かし方
+- 配列の値を取得→条件式→移動
+コード
+-
 ```html
+<h1>Todo App</h1>
- <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
+<form [formGroup]="rForm">
-  <label for="title">TODO </label>
+  <div class="form-group registItemArea">
+    <div class="input-group">
-  <input id="title" type="text" formControlName="title" #addaliases minlength="{{minNetworkAddressLength}}">
+      <input id="title" class="form-control" placeholder="Title" formControlName="title" />
+      <span class="input-group-btn">
-  <button type="submit"  (click)="addAlias(addaliases.value)">追加</button>
+        <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>
-<!--  todo -->
+<div class=" row ">
-<div class="todo-container">
+  <div class="col-sm-2 ">
-<!-- <button (click)="addAlias(addaliases.value)">追加</button> -->
-  <div
-    cdkDropList
-    #todoList="cdkDropList"
-    [cdkDropListData]="todo"
-    [cdkDropListConnectedTo]="[]"
-    class="todo-list"
-    (cdkDropListDropped)="drop($event)">
-    <div class="todo-box" *ngFor="let alias of aliases.controls; let i=index" cdkDrag>{{alias}}</div>
+    <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>
 ```
@@ -70,134 +150,160 @@
 import { FormArray } from '@angular/forms';
-import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 interface TodoItem {
+  title: string;
+  description: string;
   isComplete: boolean;
+  date: any;
 }
 @Component({
   selector: 'app-form-practice',
   templateUrl: './form-practice.component.html',
-  styleUrls: ['./form-practice.component.css']
+  styleUrls: ['./form-practice.component.scss']
 })
-export class FormPracticeComponent implements OnInit {
+export class FormPracticeComponent implements OnInit {
-  public readonly minNetworkAddressLength: number = 3;
-  profileForm = this.fb.group({
-    title: ['', Validators.required],
+    // 詳細が表示されているか
-    aliases: this.fb.array([
+    public hasDetail = false;
-      this.fb.control('')
+    // アイテムリスト
-    ])
-  });
+    public itemList: Array<TodoItem> = new Array<TodoItem>();
+  rForm: FormGroup;
-  constructor(private fb: FormBuilder) { }
+  constructor(protected fb: FormBuilder) {
+   }
-  onSubmit() {
+   ngOnInit() {
+    this.createForm();
+}
+   createForm(): void {
-    // TODO: Use EventEmitter with form value
+    // Form の作成と初期値設定をします。
-    console.warn(this.profileForm.value);
+    this.rForm = this.fb.group({
+      title: ['',
+        [
+          Validators.required
+        ]
+      ],
+      description: [''],
+      date: [''],
+      isComplete: [false]
+    });
   }
+   // todoItem を 保存します
-  get aliases() {
+   onSaveTodoItem(): void {
+    const item: TodoItem = {
-    return this.profileForm.get('aliases') as FormArray;
+      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);
   }
+    // フォームの値をリセット
-  addAlias(name: string)  {
+    clearForm(): void {
-   const text = this.aliases.push(this.fb.control(name));
+      this.rForm.reset();
-  }
+    }
-  updateProfile() {
-    this.profileForm.setValue({
-      title: '',
-    });
-  }
-  onRemoveAt(index: number): void {
-    this.aliases.removeAt(index);
-  }
+    // 指定した要素を削除
-  ngOnInit(): void {
+    onDeleteItem(index: number): void {
-  }
-  drop(event: CdkDragDrop<string[]>) {
-    if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
-    } else {
-      transferArrayItem(event.previousContainer.data,
-                        event.container.data,
-                        event.previousIndex,
-                        event.currentIndex);
+      this.itemList.splice(index, 1);
     }
+// 指定した要素を上に移動
+    onUpItem(index: number): void {
+     this.itemList.splice(0, index);
-  }
+    }
+// 指定した要素を下に移動
+    onDownItem(index: number): void {
+     this.itemList.splice(-1, index);
+   }
 }
 ```
-すみませんが知識をお借りしたいです。