Tried to validate dropdown select box but not working. May be css issue? So How to validate it. If anyone knows please help to find the solution.
Demo: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.component.html
app.component.html:
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state" [ngClass]="{'invalid-textbox' :signUpForm.submitted && !state.valid }">
<option>Select</option>
<option *ngFor="let optionName of formFields" value="{{optionName}}">{{optionName}}</option>
</select>
</div>
app.component.css:
input[type=text].invalid-textbox,
select.invalid-textbox,
input[type=password].invalid-textbox {
border-bottom: 2px solid #ed5558;
}
I got this working in the stackblitz. Template-driven forms use basic html validation so you had to add the required attribute. I also changed !state.valid to state.invalid in [ngClass]. The last thing I did was add an empty string for the value attribute and the selected attribute to initialize the ngModel state.
HTML Template
<div class="form-group col">
<select id="inputState" #state="ngModel" [(ngModel)]="model.state" name="state"
[ngClass]="{'invalid-textbox' : signUpForm.submitted && state.invalid }" required>
<option value="" selected>Select</option>
<option *ngFor="let optionName of formFields" [value]="optionName">{{optionName}}</option>
</select>
</div>
Component
model: any = {
state: ''
};
This should respond now if a user deselects a state option and tries to submit it.
Related
After adding a new div, select2 class is deleted.
I have a form with wire:submit.prevent="sendMessage"
<form wire:submit.prevent="sendMessage" method="POST">
The form has a select2 and it works perfectly, except one moment, when I click on a button. A page does not reload, because of wire:submit.prevent. And when message is sent, I add a new div.
#if($sent)
<div class="alert alert-success">
A message was sent successfully
</div>
<div wire:poll="reuse"></div>
#endif
I checked this code without new div and it works great, however it does not matter which element, when I just try to add something new, class select2 is deleted.
Also I have added wire:ignore, and in this case it doesn't work
<div wire:ignore>
<select wire:model="type" name="type[]" class="select2" multiple>
<option value=""></option>
#foreach($types as $type)
<option value="{{ $type->id }}">{{ $type->title }}</option>
#endforeach
</select>
</div>
I have tried a lot of different methods, and only one works perfectly. I added an ID to the where select is. Now it looks like
<div wire:ignore id="select2">
<select wire:model="type" name="type[]" class="select2" multiple>
<option value=""></option>
#foreach($types as $type)
<option value="{{ $type->id }}">{{ $type->title }}</option>
#endforeach
</select>
</div>
I am trying to get a list from datatbase using Freemarker. I want to make select dropdown list, but I don't undestand what I missed.
I did this:
<div class="form-group">
<select name="category" class="form-control" required>
<#list categories! as category>
<option value="${category.id}">${category.name}</option>
</#list>
</select>
</div>
I have a form but I don't see any options.
With Thymeleaf I could do this but in the project I want to use freemarker
<div class="form-group">
<select th:field="*{category}" class="form-control" required>
<th:block th:each="category : ${categories}">
<option th:text="${category.name}" value="${category.id}"/>
</th:block>
</select>
</div>
In fact I need "translate" this part from Thymeleaf to Freemarker and I don't know how.
Yes, the code fragement was correct, I just placed in a PostMapping instead of GetMapping. Now it works good with controller below:
#GetMapping("/items")
public String main(Model model) {
Iterable<Item> items;
model.addAttribute("items", items);
List<Category> categories = categoryRepository.findAll();
model.addAttribute("categories", categories);
return "items";
}
As said, I am trying to dynamically show or hide a Div using *ngIf in Angular 9 based on the value selected from dynamically generated drop down with static options.
I am very new to Angular and I directly jumped to Angular 9. I have been working on a model webapp just to see if I can get the hang of the tech.
I have a page that renders div rows based on the number of JSON objects.
Each row is an accordion in itself and each expanded accordion will in turn have 2-3 rows. In the expanded accordion I have dynamically generated a dropdown on a column.
Based on the drop down selection I need to show/hide a div in the other column on same expanded accordion.
Please do not give me a long route by using a event and a method defined in Typescript, I mean please pour in solutions but I am looking to come through this problem in the HTML page itself.
As of now the webapp has only one JSON object in the name "incidents", this is how iterate them
<div class="card" *ngIf='incidents && incidents.length' >
<div *ngFor = 'let incident of incidents ; let rowIndex = index'>
In the expanded Accordion am trying to achieve this.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="'fixType' + rowIndex">Type of Fix </label>
<select id="'fixType' + rowIndex" class="form-control">
<option selected>{{incident.TypeOfFix}}</option>
<option value="1">Data Fix</option>
<option value="2">Code Fix</option>
<option value="3">User Education</option>
<option value="4">Work Around</option>
<option value="5">User Creation</option>
<option value="6">Configuration Changes</option>
<option value="7">Document Issue</option>
<option value="8">SP/Script Changes</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="'EstClsDt' + rowIndex">Estimated Closure Date</label>
<div class="input-group">
<input #dp [id]="'EstClsDt' + rowIndex" class="form-control" placeholder="Estimated Closure Date"
[value]="incident.EstimatedClosureDT" [(ngModel)]="model" container="body" ngbDatepicker
#d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d1.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
<div class="col-md-4" *ngIf="incident.TypeOfFix == 'Code Fix' || 'fixType' + rowIndex === '2' ">
<div class="form-group">
<label for="'DepDt' + rowIndex">Deployment Date</label>
<div class="input-group">
<input #dp1 [id]="'DepDt' + rowIndex" class="form-control" placeholder="Estimated Closure Date"
[value]="incident.EstimatedClosureDT" [(ngModel)]="model" container="body" ngbDatepicker
#d2="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>
</div>
</div>
</div>
</div>
</div>
<div class = "col-md-4" *ngIf = "incident.TypeOfFix == 'Code Fix'">
This line is working and div is hidden/shown based on the value returned from the JSON object but when trying to show/hide the div in the runtime with the help of below line.
I would need the correct version for the below line. There is no particular error thrown but the webapp does not react when I change the value of the drop down and div is neither shown nor hidden during runtime. I searched Online and people os different forums are suggesting to use ngModel or ngModule but if someone can help me with a clear syntax it would be great.
<div class="form-group" *ngIf = "'fixType' + rowIndex == '2' " >
Hope I have detailed enough, Please HELP.
Thanks.
I am using angular 5 in my project and bootstrap for CSS. I have a select box where I am loading options dynamically from a service. After loading the options they are coming with a scrollbar.
This is happening only for the first. once the data is loaded it is working normally.
Code:-
<select #selectedUser autofocus name='username' class="form-control" [(ngModel)]='username' required>
<option value="">--Select UserGroup Name--</option>
<option value="" *ngIf="!loadingUserGroups">Loading</option>
<ng-container *ngIf="loadingUserGroups">
<option *ngFor="let user of dropdownListUsers; let i=index" [value]="user.userGroupid">{{user.name}}</option>
</ng-container>
</select>
loadUsersDDL(resultsUsers) {
this.loadingUserGroups = true;
this.dropdownListUsers = [];
resultsUsers.forEach(eachObj => {
this.dropdownListUsers.push({
userGroupid: eachObj.principalid,
name: eachObj.name
});
});
}
Any Help Appreciated.
Tried to insert a "select" component under a tab. Basically, the tab just displays some dynamic forms. The select is a list of string for user selection Looks like my definition is correct. Do not know why it messed up the whole angular/clarity UI page.
<clr-tab>
<button clrTabLink>Submission Form</button>
<clr-tab-content>
<br>
<label class="required" for="uniqueCertIDs">Unique Cert IDs</label>
<div class="select">
<select id="partnercertIDs" formControlName="EEPortalProductDetails">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}} </option>
</select>
</div>
Very likely, the scope of the select portion is not correct. Failed finding related documentation.
It's difficult to say whats happening without a running example.
I created a simple form with a select in a tab and it seems to be ok.
Here is the template code for my tabs:
<clr-tabs>
<clr-tab>
<button clrTabLink id="link1">Tab1</button>
<clr-tab-content id="content1" *clrIfActive>
<h3>Form 1</h3>
<form>
<div class="form-group">
<label for="selects_1">This is a select box</label>
<div class="select">
<select id="selects_1">
<option>Select</option>
<option *ngFor="let user of users" [value]="user">{{user}} </option>
</select>
</div>
</div>
</form>
</clr-tab-content>
</clr-tab>
</clr-tabs>
You can see this running here: https://stackblitz.com/edit/so-tabs-form-select
If this doesn't solve your issue, can you fork the StackBlitz and recreate it there?
<form [formGroup]="partnersForm" >
<div class="form-group">
<label class="required" for="selects_1">Unique Cert IDs</label>
<div class="select" >
<select id="selects_1" formControlName="partnerFormCertIDs" ng-change="selectAction()">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId" >{{ucertID.UniqueCertId}}</option>
</select>
</div>
</div>
</form>
and in my Session.ts file. Debug using console, the alert never shows up
selectAction() {
alert("selected value changed !!!!");
}
#nextgen-ui Regarding your second issue, the data binding syntax should be either on-change or (change); ng-change is an AngularJS directive.
Please see this Stackblitz.
#Jose Gomes
The event is defined as updateCertData()
<form [formGroup]="partnersForm" >
<div class="form-group">
<label class="required" for="selects_1">Unique Cert IDs</label>
<div class="select">
<select id="selects_1" formControlName="partnerFormCertIDs" (change)="updateCertData()">
<option *ngFor="let ucertID of uniquecertIDs" [value]="ucertID.UniqueCertId">{{ucertID.UniqueCertId}}</option>
</select>
</div>
</div>
</form>
And I defined a POST API in the event
updateCertData(){
let selectedCertID = this.partnersForm.get('partnerFormCertIDs').value;
for ( let partnerInfo of this.uniquecertIDs) {
if(partnerInfo.UniqueCertId == selectedCertID){
this.extractSubmit(this.cert);
this.submit[0].Option[0].value = partnerInfo.ProductId;
this.submit[0].Option[1].value = partnerInfo.ProductName;
this.certsService.setSubmissionProduct(this.certId, this.submit);
break;
}
}
}
this.certsService.setSubmissionProduct is a POST API, sending data back to UI Server
setSubmissionProduct(sessionId: string, info:any){
let body = {'submitConfig': info};
let url = GLOBALS.baseUrl + "session/" + sessionId + "/submitproduct";
return this.post(url, body);
}
The this.post never sends message to the controller successfully. I tried several other post methods, which works well in other logic part, but never sends message successfully if it is put within this "change" event.