ms-auth-form v0.0.8

MsAuthForm

This library was generated with Angular CLI version 16.0.0.

Code scaffolding

Run ng generate component component-name --project ms-auth-form to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ms-auth-form.

Note: Don't forget to add --project ms-auth-form or else it will be added to the default project in your angular.json file.

Build

Run ng build ms-auth-form to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ms-auth-form, go to the dist folder cd dist/ms-auth-form and run npm publish.

Running unit tests

Run ng test ms-auth-form to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

All available features

  [ionicForm]="ionicForm"
  [appName]="'my Application'"
  (submit)="isSubmittedForm($event)"
  [appLogo]="'assets/icon/favicon-dragon.png'"
  [dataForms]="formData"
  [submitButtonDetals]="submitButtonDetals"

How to Use the app properties

    ionicForm => should pass the formGroup from parent to control the library of form from the project
     eg: ionicForm: FormGroup = this.formBuilder.group({});

  [ionicForm]="ionicForm"

appName  => data type string to pass the application name if there is no name to display pass empty string
eg: appName = 'Sample Signup'
  [appName] 

submit => submit form event will fire the event if form is valid
eg: (submit)="isSubmittedForm($event)"


(submit)

[appLogo] => property binding to pass the logo or image which should show the app image

eg: [appLogo]="'assets/icon/favicon-dragon.png'"

dataForms => is to pass the data field which should render the input fields
eg: [dataForms]="formData"

sample data of form
formData = [
      {
        label: "Email",
        type: "email",
        alias: "email",
        validators: [
          {
            key: "required",
            value: true,
            customMessage: "",
          },
          {
            key: "email",
            value: true,
            customMessage: `Please Enter the valid Email.`,
          },
        ],
        value: "",
      },

      {
        label: "Password",
        type: "password",
        alias: "password",
        validators: [
          {
            key: "required",
            value: true,
            customMessage: "",
          },
          {
            key: "minlength",
            value: 5,
            customMessage: "Password should be minimum 5 charecter length",
          },
        ],
        value: "",
      },
    ];


    
    
    

submitButtonDetals => submit button details can you customizae the data text and actions which should pass like below
eg:
  [submitButtonDetals]="submitButtonDetals"
submitButtonDetals = {
    submitBtnInfo: {
      buttonName: "Log in",
      buttonColor: "success btn-success-dark",
    },
    extraLinks: [
      {
        linkText: "Create Account ?",
        redirectUrl: "/signup",
      },
    ],
  };