Lab #13

todo/src/app/todo-create/todo-create.component.html

@@ -1 +1,5 @@
-<p>todo-create works!</p>
+<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
+    <input type="text" formControlName="name">
+    <input type="checkbox" formControlName="done">
+    <button [disabled]="formGroup.invalid">Submit!</button>
+</form>

todo/src/app/todo-create/todo-create.component.ts

@@ -1,12 +1,32 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { TodoService } from '../todo.service';
+import { debounceTime } from 'rxjs';
 
 @Component({
   selector: 'app-todo-create',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule],
   templateUrl: './todo-create.component.html',
   styleUrl: './todo-create.component.scss'
 })
 export class TodoCreateComponent {
+  private readonly fb = inject(NonNullableFormBuilder);
+  private readonly todoService = inject(TodoService);
+  protected readonly formGroup = this.fb.group({
+    name: ['test', [Validators.required, Validators.minLength(3)]],
+    done: [false],
+  });
+
+  constructor() {
+    this.formGroup.valueChanges
+    .pipe(debounceTime(300))
+    .subscribe(value => console.log(value));
+  }
 
+  onSubmit() {
+    this.todoService
+    .create(this.formGroup.getRawValue())
+    .subscribe();
+  }
 }