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.
Related
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.
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.
I followed the solution on this link to have my input field filter options in the datalist using contains instead of starts with. The solution works but I have a problem with the display. The options shows both the "value" and the "innerText" on the options list as shown below:
What I wanted to do is to make the first line smaller and the second line bigger but I am not sure if this is possible and what element should I style for this.
Here's the html code that I have:
<div class="inputFieldBorder item item-input">
<div class="row">
<input type="text"
name="prodList"
id= "prodList"
maxlength = "50"
placeholder = "Things to Buy"
ng-model="listData.header.newProduct"
list="productlist">
<datalist id="productlist">
<select >
<option ng-repeat="productname in allproducts" value="{{productname.productName}}">{{productname.productName}}</option>
</select>
</datalist>
<button ng-disabled="!listData.header.newProduct"
class="button button-icon ion-android-close input-button"
ng-click="clearSelection()"></button>
</div>
</div>
I have validation for 2 fields which are country code and actual mobile number. I have attached screenshot. When correct country code is given and invalid mobile no is given at that time correct tick glyphicon for country code and cross glyphicon comes which overlaps on each other. I need to remove glyphicon for country code by using css or js. Any help will be appreciated.
If you're using jQuery:
let's say you have
<div class="container">
<div class="form">
form content...
</div>
</div>
you would call:
$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon')
if (i!=0) $(this).remove();
});
this way you get rid of the additional Xes appearing when you don't need.
I have found the answer. I have done it by using jQuery.
My actual HTML was as below,
<div class="input-group">
<div class="input-group-addon">+</div>
<input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code">
<input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control">
</div>
Bootstrap creates glyphicons for correct and wrong below the html as below,
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i>
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i>
So I have added following one line code to remove correct and wrong glyphicons for country code field,
$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove');
Can anyone show me a good example of doing a file upload with Aurelia ? I have yet to really see a good example . (html and javascript(or typescript for that matter))
Any help or direction would be greatly appreciated.
Jason
New to Aurelia so having a bit of a hard time getting the examples to work. I may not be doing the jspm intall correctly or maybe there is just something I'm not understanding.
To answer Alex's question , I already have a server side WebApi method that takes in the requests and looks at posted files and processes them. I have tested this with Chrome Postman . So my concern is strictly client side. Below is my typescript class along with the corresponding . Basically I need the upload() method code to make the request to the api I believe. below is my typescript and corresponding html.
import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';
import {inject} from 'aurelia-dependency-injection';
declare var window: { wcApiUrl: string, wcAmtInstanceId: string };
#inject(HttpClient)
export class BureauModUpdate {
constructor(private http: HttpClient) {
http.configure(x => {
x.defaults.headers = { 'Authorization': 'Basic ' + window.wcAmtInstanceId }
});
}
public upload(): void {
}
<template>
<require from="../converters"></require>
<form novalidate name="runForm" style="border:solid">
<div class="row data-form">
<div class="col-md-3 col-sm-3">
<label>Select Bureau</label>
<select id="BureauSelect" >
<option value="00">Ncci</option>
<option value="1">CA</option>
<option value="2">NY</option>
<option value="3">PA</option>
<option value="5">DE</option>
<option value="6">WI</option>
<option value="7">MI</option>
<option value="8">MN</option>
</select>
</div>
</div>
<div class="row data-form">
<div class="col-md-3 col-sm-3">
<label>Select File Upload</label>
<input type="file" name="upload" files.bind="files">
</div>
</div>
<div class="row data-form">
<div class="col-md-3 col-sm-3">
</div>
</div>
<br /><br />
<div class="row data-form">
<div class="col-md-3 col-sm-3">
<input type="submit">
</div>
</div>
</form>
</template>
Jason