diff --git a/src/app/app.component.html b/src/app/app.component.html index 0ede04b..6e3817a 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,7 @@ -
-
- - - - -
- 至少需要一筆工作事項 +
+ 單價: + + 單價應為 {{ formControl.errors?.decimal.digitLength }} 位整數位與 + {{ formControl.errors?.decimal.scaleLength }} 位整數位的數值 +
-
{{ tasks.errors | json }}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 36232db..7f3814c 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,23 +1,14 @@ import { Component } from '@angular/core'; -import { FormArray, FormBuilder } from '@angular/forms'; - -import { arrayCannotEmpty } from './validators/array-cannot-empty.validator'; +import { FormControl } from '@angular/forms'; +import { decimalValidator } from './validators/decimal.validator'; @Component({ selector: 'my-app', templateUrl: './app.component.html', - styleUrls: ['./app.component.css'], + styleUrls: [ './app.component.css' ] }) -export class AppComponent { - readonly form = this.fb.group({ - tasks: this.fb.array([], { - validators: [arrayCannotEmpty]? - }), +export class AppComponent { + readonly formControl = new FormControl(0, { + validators: [decimalValidator(2, 1)] }); - - get tasks(): FormArray { - return this.form.get('tasks') as FormArray; - } - - constructor(private fb: FormBuilder) {} } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 927c20c..5e6e85e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,6 +1,6 @@ import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; +import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; diff --git a/src/app/validators/array-cannot-empty.validator.ts b/src/app/validators/array-cannot-empty.validator.ts deleted file mode 100644 index ad9ada6..0000000 --- a/src/app/validators/array-cannot-empty.validator.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { FormArray, ValidationErrors } from '@angular/forms'; - -export function arrayCannotEmpty(formArray: FormArray): ValidationErrors | null { - if (formArray.length === 0) { - return { cannotEmpty: true }; - } - return null; -} diff --git a/src/app/validators/decimal.validator.ts b/src/app/validators/decimal.validator.ts new file mode 100644 index 0000000..e43fe77 --- /dev/null +++ b/src/app/validators/decimal.validator.ts @@ -0,0 +1,23 @@ +import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; + +export function decimalValidator( + digitLength: number, + scaleLength: number +): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + if ( + control.value === undefined || + control.value === null || + control.value === '' + ) { + return null; + } + + const regular = new RegExp( + `^\\d{1,${digitLength}}(\\.\\d{0,${scaleLength}})?$` + ); + return regular.test(control.value) + ? null + : { decimal: { digitLength, scaleLength } }; + }; +}