Dev Stack Source

Answer : Use .form-group.required without the space. .form-group.required .control-label:after { content:"*"; color:red; } Edit: For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox .form-group.required:not(.checkbox) .control-label:after, .form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */ content:"*"; color:red; } Note: not tested You should use the .text class or target it otherwise probably, try this html: <div class="form-group required"> <label class="col-md-2 control-label">&#160;</label> <div class="col-md-4"> <div class="checkbox"> <label class='text'> <!-- use this class --> <input class="" id="id_tos" name="tos" required="required" type=...

Answer : No you can not but you may want to use input type number as a workaround. Look at the following example: <input type="number" min="1900" max="2099" step="1" value="2016" /> No, you can't, it doesn't support only year, so to do that you need a script, like jQuery or the webshim link you have, which shows year only. If jQuery would be an option, here is one, borrowed from Sibu: Javascript $(function() { $( "#datepicker" ).datepicker({dateFormat: 'yy'}); });​ CSS .ui-datepicker-calendar { display: none; } Src: https://stackoverflow.com/a/13528855/2827823 Src fiddle: http://jsfiddle.net/vW8zc/ Here is an updated fiddle, without the month and prev/next buttons If bootstrap is an option, check this link, they have a layout how you want. There is input type month in HTML5 which allows to select month and year. Month selector works with autocomplete. Check the examp...

Answer : According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size. As a result, if you set an element with padding to 100% width, its padding will make it wider than 100% of its containing element. In your context, inputs become wider than their parent. You can change the way the box model treats padding and width. Set the box-sizing CSS property to border-box to prevent padding from affecting an element's width or height: border-box : The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box. Note the browser compatibility of box-sizing (IE8+). At the time of this edit, no prefixes are necessary. Paul Irish and Chris Coyier recommend the "inherited" usage below: html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } For ref...

Answer : Update 1 : phone: ['', [Validators.required, Validators.min(10000000000), Validators.max(999999999999)]], Used it like following and worked perfectly : phone: ['', [Validators.required, customValidationService.checkLimit(10000000000,999999999999)]], customValidationService : import { AbstractControl, ValidatorFn } from '@angular/forms'; export class customValidationService { static checkLimit(min: number, max: number): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { if (c.value && (isNaN(c.value) || c.value < min || c.value > max)) { return { 'range': true }; } return null; }; } } try this working sample code : component.html <div class="container"> <form [formGroup]="myForm" (ngFormSubmit)="registerUser(myForm.value)" novalidate> <div class="form-group" ...

Answer : There might be other reasons this occurs but in my case I had a button that was interpreted by the browser as a submit button and hence the form was submitted when the button was clicked causing the error. Adding type="button" fixed the issue. Full element: <button type="button" (click)="submitForm()"> In the form tag you should write the following: <form #myForm="ngForm" (ngSubmit)="onSubmit()"> and inside the form you should have submit button: <button type="submit"></button> And most importantly, if you have any other buttons in your form you should add type="button" to them. Leaving the default type attribute (which I think is submit ) will cause the warning message. <button type="button"></button> So I actually just ran into the exact same problem today except without a modal involved. In my form, I have two buttons. One that submit...