Develop Reference

how to make dropdown without warning or ngModel in angular?

could you please tell me how to make dropdown without warning or ngModel in angular? I am getting warning this
code
https://stackblitz.com/edit/angular-vsjbr9?file=src%2Fapp%2Fapp.component.ts
how I will acheive the same thing without ngModel
<form novalidate [formGroup]="searchForm" class="calform">
<section class="col-sm-6 bg-white pl-20 pr-20">
<div class="form-group col-sm-8 pl-0">
<label class="field-title mb-5">Circle<span class="color-red fontWt"> *</span></label>
<div class="select width-170 mr-20">
<select formControlName="circle" [(ngModel)]="selectedCircle">
<option class='option'
*ngFor='let o of circle'
[disabled]="o.value==''"
[value]="o.value">{{o.option}}</option>
</select>
</div>
</div>
</section>
</form>
I want first option is selected by default and user never select first option in my example ("select from list never selected")

Something like this? https://stackblitz.com/edit/angular-zxeysz?file=src%2Fapp%2Fapp.component.ts
I've removed the ngmodel. You are already using a formgroup so ngmodel is not needed.
Then in your ts file , you do create the 'circle' control, but you assigned null value. I've altered it to empty string ''. This way the the select is pre-checked with the '' value.

How to add dynamic ng-model value to select option in ng-repeat

I am working on a project wer I need to show a select option in ng-repeat.
As you can see on the above image we have number of select options.
And on select option click I am calling a service which will fetch out the answer data to populate in select option.
My issue is each and every time I click on select option the first select answer will be empty.
Is thr any way that I can store the value of first dropdown and then select other dropdown without effecting other selected values.
<tr ng-repeat="question in questionnaireData track by $index">
<td><span class="showDot">{{question.QuestionItem}}</span></td>
<td>
<div class="" >
<select ng-if="question.MasterDataCategoryId != null"
id="{{question.QuestionId}}"
ng-model="question[$index]" class="form-control"
ng-click="getAnswersDetails(question)">
<option selected="selected"></option>
<option ng-repeat="answer in answerData"
value="{{answer.MasterData}}">
{{answer.MasterData}}
</option>
</select>
<input ng-if="question.MasterDataCategoryId == null"
id="{{question.QuestionId}}"
ng-model="MasterDataCategoryId[$index].QuestionId"
type="text" name="question.QuestionId"
class="form-control">
</div>

Controlling displaying option in 2 list using jsp and bootstrap

I'm using coreui.io in one of my project coded with jsp and on a page, I have 2 dropdown list like this:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="card"> List 1 </label>
<select class="form-control" name="arg1">
<option >option 1</option>
<option>option 2</option>
</select>
</div>
</div>
</div>
Then, I have:
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="bank"> List 2 </label>
<select class="form-control" name="arg2">
<option>1. related to selection of option1</option>
<option>2. related to selection of option1</option>
<option>3. related to selection of option2</option>
<option>4. related to selection of option2</option>
</select>
</div>
</div>
</div>
My question is that I want whenever user select option1 in List 1, automatically see only option 1 and 2 in List 2 and whenever select option 2 in List 1, see only option 3 and 4 in List 2. I'm using jsp and bootsrap4(coreui.io)
How Can I do this?
The another question is that when we have too many options, it's really boring to scroll these option to the end, Do we have better feature tho display rather than a dropdown list?
Regards

How to remove blank from dropdown and required validation working in AngularJS?

I have a dropdown, I'm binding it with owners, but its giving extra blank option. I want to remove the blank option from it. I'm able to do but when I add these changes my required validator does show error.
<md-input-container>
<select name="owner" ng-model="form.owner" ng-options="owner.UserName for owner in owners"
class="input-div" style="height:30px" ng-change="ownerTypeChange()" required ng-disabled="update && view">
<option style="display:none" value=undefined>Select an owner</option>
</select>
<div ng-messages="DataAccessRoleForm.owner.$error">
<div ng-message="required">required</div>
</div>
</md-input-container>
If I remove the below line, then required validator works but dropdown has the blank option.
<option style="display:none" value=undefined>Select an owner</option>

Check if your select has been touched before displaying the required message.
<div ng-if="form.owner.$touched" ng-message="required">required</div>
You can also set the default option to be selected but not selectable once they open the drop down.
<option value="" disabled selected hidden>Select an owner</option>

Show a list of items inside an ng-repeat when an input is selected with model

So, I have this ng-repeat which has a model inside subj.Prerequisites, subj.Prerequisites can contain an array e.g ['SUBJ1', 'SUBJ2']. What i wanted to do is when i click on my input text inside this ng-repeat there will be a shown list of subjects below which allow multiple selection and then with the multiple selected items should be binded to the clicked input text.
<div ng-repeat="subj in sem.subjects track by $index">
<md-input-container flex class="no-error-spacer uk-margin-remove">
<label>Prerequisites</label>
<input type="text" ng-model="subj.Prerequisites" ng-value="(subj.Prerequisites.length <= 0) ? null : subj.Prerequisites" readonly="true">
</md-input-container>
</div>
<select multiple>
<option ng-repeat="sb in subjects" value="sb.subjectCode>{{ sb.subjectCode }}</option>
</select>
Its kind the hard for me though. Please someone help me. Thank you so much!

As per my understanding of your question. Please look into this working plunker :
<div ng-repeat="subj in subjects track by $index">
<label>Prerequisites for {{subj.subjectCode}}</label>
<input type="text" ng-model="multiPre[$index]" ng-click="test($index)">
</div>
<select ng-model="multiPre[selected]" multiple>
<option ng-repeat="sb in subjects[selected].prerequisites">{{sb}}</option>
</select>
https://plnkr.co/edit/2brsDinqAouZ9h6w1taT?p=preview
PS: I have left {{multipre}} intentionally for your understanding of model.
Edit Start :
Try This :
https://plnkr.co/edit/OJm07aLJQTCVgWSGgnZt?p=preview
This addressees to your requirement.