|
|
@ -0,0 +1,71 @@ |
|
|
|
import { Subject, takeUntil } from 'rxjs'; |
|
|
|
import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core'; |
|
|
|
import { NG_VALIDATORS, NG_VALUE_ACCESSOR, FormBuilder, ControlValueAccessor, Validators, ValidationErrors } from '@angular/forms'; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
selector: 'app-task-form', |
|
|
|
templateUrl: './task-form.component.html', |
|
|
|
styleUrls: ['./task-form.component.css'], |
|
|
|
providers:[ |
|
|
|
{ |
|
|
|
provide: NG_VALUE_ACCESSOR, |
|
|
|
useExisting: forwardRef(()=> TaskFormComponent), |
|
|
|
multi:true, |
|
|
|
}, |
|
|
|
{ |
|
|
|
provide: NG_VALIDATORS, |
|
|
|
useExisting: forwardRef(()=> TaskFormComponent), |
|
|
|
multi:true, |
|
|
|
}, |
|
|
|
], |
|
|
|
}) |
|
|
|
export class TaskFormComponent implements OnInit, ControlValueAccessor, Validators, OnDestroy { |
|
|
|
|
|
|
|
readonly form= this.fb.group({ |
|
|
|
subject: this.fb.control(''), |
|
|
|
content: this.fb.control(''), |
|
|
|
}); |
|
|
|
constructor(private fb: FormBuilder) { } |
|
|
|
|
|
|
|
private readonly stop$ = new Subject<void>(); |
|
|
|
|
|
|
|
ngOnDestroy(): void { |
|
|
|
this.stop$.next(); |
|
|
|
this.stop$.complete(); |
|
|
|
} |
|
|
|
writeValue(data:any): void {//這裡data:Task改成data:any,規避patchValue(data)不可為空值
|
|
|
|
if(data){ |
|
|
|
this.form.patchValue(data); |
|
|
|
} |
|
|
|
} |
|
|
|
registerOnChange(fn: ()=> void): void { |
|
|
|
this.onChange=fn; |
|
|
|
} |
|
|
|
registerOnTouched(fn: ()=> void): void { |
|
|
|
this.onTouched= fn; |
|
|
|
} |
|
|
|
setDisabledState?(disabled: boolean){ |
|
|
|
if(disabled){ |
|
|
|
this.form.disable(); |
|
|
|
}else{ |
|
|
|
this.form.enable(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
onChange!:(_:Task) =>void; |
|
|
|
onTouched!:() =>void; |
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
this.form.valueChanges |
|
|
|
.pipe(takeUntil(this.stop$)) |
|
|
|
.subscribe((value:any) =>this.onChange(value));//這裡被增加了value:any,規避onChange(value)的需求
|
|
|
|
} |
|
|
|
|
|
|
|
validate():ValidationErrors|null{ |
|
|
|
if(this.form.valid){ |
|
|
|
return null; |
|
|
|
} |
|
|
|
return {invalid:true}; |
|
|
|
} |
|
|
|
|
|
|
|
} |