|
|
@ -1,5 +1,13 @@ |
|
|
|
import { Component } from '@angular/core'; |
|
|
|
import { FormControl } from '@angular/forms'; |
|
|
|
import { Component, OnDestroy, OnInit } from '@angular/core'; |
|
|
|
import { |
|
|
|
AbstractControl, |
|
|
|
FormArray, |
|
|
|
FormBuilder, |
|
|
|
FormControl, |
|
|
|
ValidationErrors, |
|
|
|
} from '@angular/forms'; |
|
|
|
import { Observable, of, Subject, takeUntil } from 'rxjs'; |
|
|
|
import { debounce, debounceTime, distinctUntilChanged, filter, map } from 'rxjs/operators'; |
|
|
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
@ -7,10 +15,35 @@ import { FormControl } from '@angular/forms'; |
|
|
|
templateUrl: './app.component.html', |
|
|
|
styleUrls: ['./app.component.css'], |
|
|
|
}) |
|
|
|
export class AppComponent { |
|
|
|
readonly condition = new FormControl(); |
|
|
|
export class AppComponent { |
|
|
|
form = this.fb.group({ |
|
|
|
tasks: this.fb.array([]), |
|
|
|
}); |
|
|
|
get tasks(): FormArray { |
|
|
|
return this.form.get('tasks') as FormArray; |
|
|
|
} |
|
|
|
constructor(private fb: FormBuilder) { } |
|
|
|
|
|
|
|
onSetValue(): void { |
|
|
|
this.tasks.patchValue([ |
|
|
|
{ subject: 'Task A', content: 'Do something...' }, |
|
|
|
{ subject: 'Task B', content: 'Do something...' }, |
|
|
|
]) |
|
|
|
} |
|
|
|
|
|
|
|
onAdd(): void{ |
|
|
|
const group = this.fb.group({ |
|
|
|
subject: this.fb.control(''), |
|
|
|
content: this.fb.control(''), |
|
|
|
}); |
|
|
|
this.tasks.push(group); |
|
|
|
} |
|
|
|
|
|
|
|
onRemove(index: number): void { |
|
|
|
this.tasks.removeAt(index); |
|
|
|
} |
|
|
|
|
|
|
|
onSearch(): void{ |
|
|
|
console.log(`查詢條件:${this.condition.value}`); |
|
|
|
onClear(): void { |
|
|
|
this.tasks.clear(); |
|
|
|
} |
|
|
|
} |