ng-form-group-validation

This library was generated with Angular CLI version 17.3.0.

Usage

This library gives validation messages with minmal coding for angular reactive forms. the styling of labels, form controls, error message have been created with flexibility in usage. the asterisk symbol which indicates the field is mandatory is also taken care of by ### ng-form-group-validation. to add the symbol add Validators.Required to the form control

Adding to code

To add in component

@Component({
  selector: 'app-root',
  standalone: true,
imports: [ NgValidationComponent, FormsModule, ReactiveFormsModule],
...
})

in html

        <validate label="name">
          <input #control formControlName="input" name="input">
        </validate>
    </form>

By using this compenent, you have access to the formControls in your component enabling you to show, hide, disable, or enable the form controls based on other form controls or other variables in the component

added messages

| Error | Message | | ----- | ----- | | required | label is required | | minlength | label cannot be less than requiredLength" characters` | | maxlength | label cannot be more than "requiredLength" characters | | min | label cannot be less than "min" | | max | label cannot be more than "max" | | email | label is not a valid email |

custom messages

To use custom messsages or messages for custom validators create a constant in following format.

    export const messages = {
        error_name: (name: string, args): string => `${name} is invalid`,
    }

error_name is the name of the error from validator. name is the variable for label. you may or may not use it in the message

this custom message can be injected to module or component using dependency injection as follows

providers: [{ provide: 'CUSTOM_MESSAGES', useValue: messages }]

styles

validate component will give a div with .form-group class. this div contains 2 divs in it for label and the form control. You can use flex-direction to align content horizontally or vertically

for styles

.error-message {
      color:red
    }
    .mandatory-sign {
      color: pink;
    }

use .error-message and .mandatory-sign classes to give styles for error message string and asterisk symbol indicating star symbol