Develop Reference

Angular 9 ngModel not clearing default selection

I am trying to autofill a text box based on the state from another component. Which works fine. But when I go to add ngModel to the text box to take in the value when submitting the form. The value is cleared and not displayed to the user.
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" value="{{state.type}}" readonly />
</div>
<div *ngIf="autoFill; else noFillStop" class="row">
<label>Nearby Stop / Station</label>
<input
type="text"
value="{{state.stopName}}"
[(ngModel)]="stopName"
readonly
/>
</div>
As you can see in the image the text shows up when there is no ngModel placed on the input. But when there is a ngModel it is not shown.
Can anyone help with this?

Use [(ngModel)] for both text boxes
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" [(ngModel)]="state.type" readonly>
</div>
<div *ngIf="autoFill; else noFillStop" class="row">
<label>Nearby Stop / Station</label>
<input type="text" [(ngModel)]="state.stopName" readonly>
</div>
Note: [(ngModel)] is for two-way binding which will update data from component to view and vice-versa.
In two-way data binding, automatic synchronization of data happens between the Model and the View. Here, change is reflected in both components. Whenever you make changes in the Model(.ts), it will be reflected in the View(html) and when you make changes in View, it will be reflected in Model.
This happens immediately and automatically, ensures that the HTML template and the TypeScript code are updated at all times.

ngModel creates a two-way binding. In your case, you probably don't have stopName attribute in your component and that's why when you add NgModel you get empty input field. Your code is redundant in this case, value and ngModel both try to set the input value.
Try removing value and set existing attributes to ngModel.
<div *ngIf="autoFill; else noFillMode" class="row">
<label>Mode of Transport</label>
<input type="text" value="{{state.type}}" readonly>
</div>
<div *ngIf="autoFill; else noFillStop" class="row">
<label>Nearby Stop / Station</label>
<input type="text" [(ngModel)]="state.stopName" readonly>
</div>
You can also try to use FormControl, which gives option to set, get, clear, check the validity, ... values from specific formControl or from whole form.
Here is a small implementation in StackBlitz
Don't forget to import ReactiveFormModule

A field of Angular template driven forms considered invalid even though the regExp matches

I have this input:
<div class="form-group">
<label for="power">Hero Power</label>
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="text"
class="form-control" pattern="^[0-9]+$"id="powerNumber">
<div [hidden]="powerNumber.valid" class="alert alert-danger">
power must be a number
</div>
</div>
I have added a pattern validator to the input field (only number should pass the test). Below the input I have added an error message that should hidden when the input field is valid. However it shows even when I have entered a value that matches the pattern RegExp. What am I doing wrong?
Here is a Stackblitz demonstration https://stackblitz.com/edit/template-driven-form-demo-wl3apt?file=app%2Fuser-form%2Fuser-form.component.ts

add #powerNumber="ngModel" template reference to input ngModel and all will be working. It is already done with name input in your example

I don't know whether it is eligible for you, however you can use input just for numbers:
<input [(ngModel)]="model.powerNumber" name="powerNumber" type="number"
class="form-control" id="powerNumber">

AngularJS ng-message directive always showing message

I am trying to set the select field in the view to be required. So I'm having the below tags in my view.html
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">Laboratory Name</label>
<select name="labName" class="form-control" ng-model="request.labName" required>
<option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
</select>
<div style="color:maroon" ng-messages="homeForm.labName.$error"
ng-if="homeForm.requestTypeName.$touched">
<div ng-message="required">This field is required</div>
</div>
</div>
I was hoping the This field is required will show up only when there is no data selected. But irrespective of the field has data or not This field is required shows up like below
Is there something I am missing here

You need to set the same input name in your input and in your ng-message. Doing this, you don't even need to have ng-if. For example:
<form name="form">
<input name="fullname" type="text" ng-model="fullname" required/>
<div ng-messages="form.$submitted && form.fullname.$error">
<p ng-message="required" class="help-block">This field is required</p>
</div>
</form>
In this case I am using form.$submitted. You can remove that, replace it with touched/dirty or whatever. The principle is the same.

The ng-messages directive is in a separate library module and must be included as a dependency.
Example
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-messages/angular-messages.js"></script>
JS
angular.module("app",["ngMessages"])
For more information, see AngularJS ngMessages Module API Reference.

You are using homeForm.requestTypeName in the ng-if, and there is no input control named requestTypeName, i guess you must use homeForm.labName as you use in the ng-message attribute.
Basically, change the ng-if to ng-if="homeForm.labName.$touched"
TL;DR;
You could use as well the homeForm.labName.$error.required for checking if actually the end user has passed away that field without entering some input.
Source: https://docs.angularjs.org/api/ng/directive/ngRequired

ng-required does not work with number input with min condition

I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.

you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.

I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.

I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>

How can I validate select tag using angular validations

I want to add a message, whenever the user does not select any value in the select tag.
Until now I have approached as below:
<form name="jdForm">
<div class="form-group col-sm-6 require">
<label class="form-control-label">Jd Name</label>
<select class="form-control" name="jdname" ng-model="oData.jdDetails.jdName" required>
<option>select</option>
<option ng-repeat="jd in jdNames">{{jd}}</option>
</select>
<span ng-show="jdForm.jdname.$untouched ">Please select jd name</span>
</div>
<button ng-click="fnSave()">Publish</button>
</form>
Here the message is shown what I have given in span but the thing is onload event. It is showing but I need to show it after clicking on publish button. The ng-click function call should not happen until the form is validated.

you need to kept submit button instead simple ng-click and on every error message tag apply condition of is form submitted or if you want to show error even on focus out add one more condition of is touched.
bellow is example i prefer for validating form
<span ng-messages="signupForm.password.$error" ng-if='signupForm.$submitted || signupForm.password.$touched'>
<span ng-message="required" class="help-block">Please Enter password</span>
</span>

I would use something like:
savePressed && (jdForm.jdname.$untouched ||jdForm.jdname.$invalid)
Where savePressed is just a variable which turns to true after pressing the publish button.
See the plunker for a working copy