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> > > [image: Inline image 1] > > 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> >> >> >> ?? >> >> Regards >> Sander >> >> -- >> 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/unsubscribe. >> To unsubscribe from this group and all its topics, 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. >> > > -- 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.
