\r\n Examples and usage guidelines for form control styles & validation,\r\n We use \r\n \r\n ng-bootstrap-form-validation\r\n \r\n to make form validation more adapt with Bootstrap.\r\n
Basic form validation
`,\r\n component: require('!!raw-loader!./demos/basic-validation/basic-validation'),\r\n html: require('!!raw-loader!./demos/basic-validation/basic-validation.html'),\r\n outlet: DemoFormBasicValidationComponent\r\n },\r\n {\r\n title: 'Custom Error Message',\r\n anchor: 'custom-error-message',\r\n description: `Validation with custom message
`,\r\n component: require('!!raw-loader!./demos/custom-error-message/custom-error-message'),\r\n html: require('!!raw-loader!./demos/custom-error-message/custom-error-message.html'),\r\n outlet: DemoFormCustomErrorMessageComponent\r\n },\r\n {\r\n title: 'Form Grid',\r\n anchor: 'form-grid',\r\n description: `More complex forms can be built using bootstrap grid. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
`,\r\n component: require('!!raw-loader!./demos/grid/grid'),\r\n html: require('!!raw-loader!./demos/grid/grid.html'),\r\n outlet: DemoFormGridComponent\r\n },\r\n {\r\n title: 'Horizontal form',\r\n anchor: 'horizontal-form',\r\n description: `Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels and controls.
Be sure to use .col-form-label-sm or .col-form-label-lg to your <label>s or <legend>s to correctly follow the size of .form-control-lg and .form-control-sm.
The example below uses a flexbox utility to vertically center the contents and changes .col to .col-auto so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
Use the .col-auto class to create horizontal layouts. By adding gutter modifier classes, we’ll have gutters in horizontal and vertical directions. The .align-items-center aligns the form elements to the middle, making the .form-checkbox align properly.