-------------------------------------------- On Thu, 12/15/16, abhishek chaturvedi <[email protected]> wrote:
Subject: Re: [AngularJS] Re: Angular 2 form validation with input type=“text” with some condition To: [email protected] Date: Thursday, December 15, 2016, 1:19 PM sharing u my html: <div class="panel panel-default"> <div class="panel-header"> <div class="row"> <div class="col-xs-4"> <label class="select-all"> <input type="checkbox" id="selectAllCheckbox" [(ngModel)]="isSelectAll" (change)="selectAllOnChange($event)"> Select All </label> </div> <div class="col-xs-4 float-right"> <select class="form-control input-sm" [(ngModel)]="selectedDays"> <option value="business">Business Days</option> <option value="calendar">Calendar Days</option> </select> </div> </div> </div> <div class="panel-body"> <form #periodicityForm="ngForm"> <div class="row"> <div class="col-xs-3 col-periodicity"> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="janCheckbox" name="janCheckbox" [(ngModel)]="periodicObj[0].ischecked" (change)="daysSelectionOnChange($event,0)"> Jan </label> <div class="form-group"> <input type="text" name="janDays" [attr.pattern]="selectedDays === 'calendar' ?([1-9]|[12]\d|3[01]): false" [required]="selectedDays === 'calendar' && periodicObj[0].ischecked" [(ngModel)]="periodicObj[0].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="febCheckbox" name="febCheckbox" [(ngModel)]="periodicObj[1].ischecked" (change)="daysSelectionOnChange($event,1)"> Feb </label> <div class="form-group"> <input type="text" name="febDays" [required]="selectedDays === 'calendar' && periodicObj[1].ischecked" [(ngModel)]="periodicObj[1].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="marCheckbox" name="marCheckbox" [(ngModel)]="periodicObj[2].ischecked" (change)="daysSelectionOnChange($event,2)"> Mar </label> <div class="form-group"> <input type="text" name="marDays" [required]="selectedDays === 'calendar' && periodicObj[2].ischecked" [(ngModel)]="periodicObj[2].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> </div> <!-- .col-xs-3 --> <div class="col-xs-3 col-periodicity"> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="aprCheckbox" name="aprCheckbox" [(ngModel)]="periodicObj[3].ischecked" (change)="daysSelectionOnChange($event,3)"> Apr </label> <div class="form-group"> <input type="text" name="aprDays" [required]="selectedDays === 'calendar' && periodicObj[3].ischecked" [(ngModel)]="periodicObj[3].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="mayCheckbox" name="mayCheckbox" [(ngModel)]="periodicObj[4].ischecked" (change)="daysSelectionOnChange($event,4)"> May </label> <div class="form-group"> <input type="text" name="mayDays" [required]="selectedDays === 'calendar' && periodicObj[4].ischecked" [(ngModel)]="periodicObj[4].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="junCheckbox" name="junCheckbox" [(ngModel)]="periodicObj[5].ischecked" (change)="daysSelectionOnChange($event,5)"> Jun </label> <div class="form-group"> <input type="text" name="junDays" [required]="selectedDays === 'calendar' && periodicObj[5].ischecked" [(ngModel)]="periodicObj[5].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> </div> <!-- .col-xs-3 --> <div class="col-xs-3 col-periodicity"> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="julCheckbox" name="julCheckbox" [(ngModel)]="periodicObj[6].ischecked" (change)="daysSelectionOnChange($event,6)"> Jul </label> <div class="form-group"> <input type="text" name="julDays" [required]="selectedDays === 'calendar' && periodicObj[6].ischecked" [(ngModel)]="periodicObj[6].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="augCheckbox" name="augCheckbox" [(ngModel)]="periodicObj[7].ischecked" (change)="daysSelectionOnChange($event,7)"> Aug </label> <div class="form-group"> <input type="text" name="augDays" [required]="selectedDays === 'calendar' && periodicObj[7].ischecked" [(ngModel)]="periodicObj[7].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="sepCheckbox" name="sepCheckbox" [(ngModel)]="periodicObj[8].ischecked" (change)="daysSelectionOnChange($event,8)"> Sep </label> <div class="form-group"> <input type="text" name="sepDays" [required]="selectedDays === 'calendar' && periodicObj[8].ischecked" [(ngModel)]="periodicObj[8].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> </div> <!-- .col-xs-3 --> <div class="col-xs-3 col-periodicity"> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="octCheckbox" name="octCheckbox" [(ngModel)]="periodicObj[9].ischecked" (change)="daysSelectionOnChange($event,9)"> Oct </label> <div class="form-group"> <input type="text" name="octDays" [required]="selectedDays === 'calendar' && periodicObj[9].ischecked" [(ngModel)]="periodicObj[9].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="novCheckbox" name="novCheckbox" [(ngModel)]="periodicObj[10].ischecked" (change)="daysSelectionOnChange($event,10)"> Nov </label> <div class="form-group"> <input type="text" name="novDays" [required]="selectedDays === 'calendar' && periodicObj[10].ischecked" [(ngModel)]="periodicObj[10].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> <div class="form-inline"> <label class="checkbox-inline"> <input type="checkbox" id="decCheckbox" name="decCheckbox" [(ngModel)]="periodicObj[11].ischecked" (change)="daysSelectionOnChange($event,11)"> Dec </label> <div class="form-group"> <input type="text" name="decDays" [required]="selectedDays === 'calendar' && periodicObj[11].ischecked" [(ngModel)]="periodicObj[11].daysAfterMonthEnd" class="form-control input-sm input-periodicity"> </div> </div> <!-- .form-inline --> </div> <!-- .col-xs-3 --> </div> <!-- .row --> </form> </div> <!-- .panel-body --></div><!-- .panel-default --> On Thu, Dec 15, 2016 at 3:39 PM, abhishek chaturvedi <[email protected]> wrote: I made a model-driven form in angular 2, and one of the input fields (it's basically a month let jan) must show up only if a dropdown above is selected particular which basically a <option>. My question is how can I set that input required only if the option value is Calendar? And also i want that max value cann't greater than 31 as it's month field. <option value="business">Business Days</option><option value="calendar">Calendar Days</option> On Thu, Dec 15, 2016 at 2:48 PM, Sander Elias <[email protected]> wrote: Hi Aec, You mean something like: <form > Number<input type="text" name="number" pattern="[0-3]?[0-9]" title="a day between 1 and 31"> <input type="submit"> </form> ?? RegardsSander -- You received this message because you are subscribed to a topic in the Google Groups "Angular" group. To unsubscribe from this topic, visit https://groups.google.com/d/to pic/angular/aXposLnawjE/unsubs cribe. To unsubscribe from this group and all its topics, send an email to angular+unsubscribe@googlegrou ps.com. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/grou p/angular. For more options, visit https://groups.google.com/d/op tout. -- You received this message because you are subscribed to the Google Groups "Angular" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout. olul si subsolul tarii se vor bucura timp de 30 de ani de urmatoarele foloase -- You received this message because you are subscribed to the Google Groups "Angular" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
