How to validate checkboxes for at least one selected error message. I tried, but it's not working. Link to my project
app.component:
<form [formGroup]="form" (ngSubmit)="submit()">
<label formArrayName="orders" *ngFor="let order of orders; let i = index">
<input type="checkbox" [formControlName]="i">
{{order[i].name}}
</label>
<div *ngIf="???">At least one order must be selected</div>
<br>
<button [disabled]="!form.valid">submit</button>
</form>
Related
I'm trying to do an reactive form but I have some problem with the visual part ^^
Here is my html :
<form class="text-center" [formGroup]="requeteModif" (ngSubmit)="modifier()" *ngIf="tableSelect != null">
<h5>Ajouter des informations</h5>
<div class="row">
<div class="col" *ngFor="let modification of modif.controls; let nomCol of nomColonne; let j=index" formArrayName="modif">
<label class="text-center">
{{nomCol}}
</label>
<div *ngFor="let infoTable of infoTable; let i = index;">
<input type="text" class="form-control" [formControlName]="i">
</div>
<div><button class="btn btn-primary" type="submit">Modifier</button></div>
</div>
</div>
</form>
What I want :
Col1 Col2
true A Button (get true, A)
false B Button
[EDIT]
I have find a way to display it the way I want but I don't know how to arrange my code since I'm suppose to use variable..
<div *ngFor="let infoTable of infoTable; let i = index;">
<input *ngIf="j==0" type="text" class="form-control" [formControlName]="i">
<input *ngIf="j==1" type="text" class="form-control" [formControlName]="i+5">
</div>
j id the number of the columns, as you can see it's depend on the number of columns, using this way it's too static but I have no idea about how to fix it...
Sorry for my english
Thank you !
I have find the answer, I just have use the data_binding but I didn't knew how it works ^^' [ngModel]
I am trying to validate an input that is required in a *ngFor loop.
But I cant get a unique template Reference.
On Submit all Input fields are required / or none if at least one is filled out.
I tried to declare Template Reference like #optionContent_{{i}} but i can fill that in [ngClass].
Any help?
<form name="form" (ngSubmit)="f.form.valid && addOption()" #f="ngForm" novalidate>
<div class="row" *ngFor="let size of optionModel.optionContent let i = index">
<div class="col-12">
<label for="optionContent_{{i}}>Name Option</label>
<input id="optionContent_{{i}}"
type="text"
#optionContent="ngModel"
[ngClass]="{ 'is-invalid': f.submitted && optionContent.invalid }"
required
name="optionContent"
[(ngModel)]="size.name" class="form-control">
</div>
</div>
</form>
the problem is in the name attribute they all have the same name, so ngForm gets confused try add dynamic name
<input ... name="optionContent{{i}}" ../>
I want to validate the form when user click the submit button using bootstrap and angularjs.If any of the field in the form is blank i want to dislay the error message below the blank elements.
Demo : https://plnkr.co/edit/55lFImusbCznYjLXypDu?p=preview
html code:
<form name="myForm" ng-controller="ExampleController">
<div>Select Color : </div>
<label name="team" ng-repeat="color in colorNames" class="checkbox-inline">
<input type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)"> {{color}}
<br> </label><br>
<div ng-show="myForm.$submitted || myForm.color.$touched">
<p class="error-mesg" ng-show="headerForm.color.$error.required">Select the color</p>
</div>
<div class="">
<div style="color: black;">Username : </div>
<input type="text" name="user" value="" required>
<div ng-show="myForm.$submitted || myForm.user.$touched">
<p class="error-mesg" ng-show="myForm.user.$error.required">The Username is required</p>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-click="submitForm(myForm)">Submit</button>
</form>
My above code is failing to show error message below the checkboxes when not selected.I want to show an error message "Please Select the color" below the checkboxes when user click on submit button without selecting atleast one checkbox.And when user click on any of the check box the error message should disappear.
You can add dynamically required for checkbox input: ng-required="selectedColor.length === 0"
if you do not select color, checkboxs will be required, when color is selected, then is it unrequired.
<input ng-required="selectedColor.length === 0" oninvalid="this.setCustomValidity('Please select the color')" type="checkbox" name="color" value="{{color}}" ng-checked="selectedColor.indexOf(color) > -1" ng-click="userSelection(color)">
I want to implement a checklist in Angular. Some boxes have to be pre-checked based on an array in the ts file and the array has to be updated when a checkbox is checked. I am doing it like:
<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
<input type="checkbox" aria-label="Checkbox 1" [value]="option.text" name="checkBox" [(ngModel)]="optionsSelectedArray"/>
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
optionsSelectedArray contains the option IDs retrieved from server.
But it doesn't work. All the checkboxes come checked when the the division is rendered.
EDIT
I have changed my code as follows :
<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
<input type="checkbox" id="{{option.optionId}}" name="checkBox" [(ngModel)]="option.userResponse" (ngModelChange)= "setResponseChanged()">
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
Here option.userResponse in boolean. Now on selecting the checkboxes the currentQuestion object is correctly changing but when the checklist loads for the first time, the checkboxes are not checked correctly.All the checkboxes come checked if the option.userResponse is true for the last item ,none come checked otherwise.
Perhaps this might do what you want
<div class='form-group que-box' *ngFor="let option of currentQuestion.options; let i=index">
<input type="checkbox" aria-label="Checkbox 1" name="checkBox" [(ngModel)]="optionsSelectedArray[i]"/>
<label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>
(I added ; let i=index and [i])
I need a four radio button. First iteration generates 2 radio button & second iteration generates 2 radio button. If i select one of the Radio button in first section , then one of the radio button in second selection is also selected. I want two section containing 2 radio button each which dont reflect the changes on each other. Any help pls
<div ng-controller="MainCtrl" >
<div data-ng-repeat="choic in choice" >
<form >
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="no" ><div class="mediumSubhead"> Information housed </div><br/>
<input ng-model="parent.mustShow" class="label_align" type="radio" name="customer" value="yes" >
<div class="mediumSubhead"> Information housed outside </div></form>
</div>
</div>
Controller.js
var app = angular.module('EquityCompensation', []);
app.controller('MainCtrl', function($scope) {
$scope.choice = [{id: 'choic1'},{id: 'choic2'}];
});
I'd suggest you to put the mustShow variable inside the choice array. So that would help you make the track of the each element. That will make your ng-model declaration to ng-model="choic.mustShow"
And to show the outer input element you could use filter over there that will check that any of the choice has mustShow option is ticked then you show the input element.
Markup
<div data-ng-repeat="choic in choice">
<form>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="no">
<div class="mediumSubhead"> Information housed </div>
<br/>
<input ng-model="choic.mustShow" class="label_align" type="radio" name="customer" value="yes">
<div class="mediumSubhead"> Information housed outside </div>
</form>
</div>
<div ng-show="(choice | filter: {mustShow: 'yes'}).length > 0">
<input name="first_name" class="text_box_space" type="text" value="" style="color: black;" size="25" width="200px">
</div>
Demo Plunkr