BugFixes: #8

bizmatch/src/app/components/validated-price/validated-price.component.html

@@ -1,4 +1,5 @@
 <div>
+  @if(label){
   <label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
     {{ label }}
     @if(validationMessage){
@@ -11,6 +12,7 @@
     <app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
     }
   </label>
+  }
   <input
     type="text"
     [id]="name"
@@ -18,9 +20,10 @@
     (ngModelChange)="onInputChange($event)"
     (blur)="onTouched()"
     [attr.name]="name"
-    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
+    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 {{ inputClasses }}"
     [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
     currencyMask
     autocomplete="off"
+    [placeholder]="placeholder"
   />
 </div>

bizmatch/src/app/components/validated-price/validated-price.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef } from '@angular/core';
+import { Component, forwardRef, Input } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgxCurrencyDirective } from 'ngx-currency';
 import { BaseInputComponent } from '../base-input/base-input.component';
@@ -18,14 +18,17 @@ import { ValidationMessagesService } from '../validation-messages.service';
     },
   ],
   templateUrl: './validated-price.component.html',
+  styles: `:host{width:100%}`,
 })
 export class ValidatedPriceComponent extends BaseInputComponent {
+  @Input() inputClasses: string;
+  @Input() placeholder: string;
   constructor(validationMessagesService: ValidationMessagesService) {
     super(validationMessagesService);
   }
 
   onInputChange(event: Event): void {
-    this.value = event;
+    this.value = !event ? null : event;
     this.onChange(event);
   }
 }