diff --git a/src/app/app.component.html b/src/app/app.component.html index f379fa6..a4d0d69 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,15 +1,3 @@ -
{{formControl.value | json}}diff --git a/src/app/app.component.ts b/src/app/app.component.ts index b8e1237..9fe1927 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,45 +1,11 @@ -import { Component, OnInit } from '@angular/core'; -import { - FormBuilder, - FormControl, - FormGroup, - Validators, -} from '@angular/forms'; -import { map } from 'rxjs'; +import { Component, VERSION } from '@angular/core'; +import { FormControl } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrls: [ './app.component.css' ] }) -export class AppComponent implements OnInit { - form: FormGroup = this.fb.group({ - TaskSn: this.fb.control('0001'), - Status: this.fb.control('Finish'), - FinishDate: this.fb.control(''), - }) - constructor(private fb: FormBuilder){} - get taskSn():FormControl{ - return this.form.get('TaskSn') as FormControl; - } - get status(): FormControl{ - return this.form.get('Status') as FormControl; - } - get finishDate(): FormControl{ - return this.form.get('FinishDate') as FormControl; - } - ngOnInit(): void { - this.status.valueChanges - .pipe(map((status) => status ==='Finish')) - .subscribe({ - next:(isFinish) =>{ - if(isFinish){ - this.finishDate.addValidators(Validators.required); - }else{ - this.finishDate.removeValidators(Validators.required); - } - this.finishDate.updateValueAndValidity(); - }, - }) - } +export class AppComponent{ + readonly formControl= new FormControl(); } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4d3e444..6e7fba9 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -4,10 +4,11 @@ import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; +import { TaskFormComponent } from './task-form/task-form.component'; @NgModule({ imports: [ BrowserModule, ReactiveFormsModule, HttpClientModule ], - declarations: [ AppComponent ], + declarations: [ AppComponent, TaskFormComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } diff --git a/src/app/task-form/task-form.component.css b/src/app/task-form/task-form.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/task-form/task-form.component.html b/src/app/task-form/task-form.component.html new file mode 100644 index 0000000..6f446fc --- /dev/null +++ b/src/app/task-form/task-form.component.html @@ -0,0 +1,4 @@ +