AngularJS: How to set default value to ng-model="searchText"? - html

I am unable to set a default value to ng-model="searchText". Here is the code I am using
<input ng-model="searchText" value="can you see me" />
Can anyone help me with this?

1st Solution: is to simply init the searchText in the controller.
App.controller('mainController',['$scope', function($scope) {
$scope.searchText = "can you see me";
}]);
2nd Solution: is to use ng-init insteat of value
<input ng-model="searchText" ng-init="searchText ='can you see me'"></input>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
<div >
<input ng-model="searchText" type="text" ng-init="searchText='your text'"/>
</div>
</div>
you can use ng-init

Try this following code:
<input ng-model="searchText" ></input>
In your controller
$scope.searchText = "your default value";
Edit : If you don't want to initialize the default value in controller just do
<input value="your default value" ></input>

Do not use ng-init on your input field to set the value. That's not required.
Just set the scope of your model to the value you would like. If it's simply placeholder text, it would be better to use the html5 placeholder attribute on your input element.
<input type="text" ng-model="someText" placeholder="Initial Text">
This will give you some text in the input field without the need to add anything to the controller scope.
If you want the text as a value you can pass without filling in the input field than you would need to set that in your controller.
$scope.someText = "Some Text";

You can set default value in the controller. Like this:
app.controller('myCtrl', function($scope){
$scope.searchText = "Some default value";
});
And keep value attribute blank on input tag.

For later angular versions:
In your ts file:
export class SearchComponent implements OnInit {
search: string;
ngOnInit(): void {
this.search = "Some default value";
}
}
html file contains:
<input [(ngModel)]="searchText">

Related

How to conditionally render an HTML property?

On my project, I'm using PicoCSS as a default style.
I have a form on which I want to highlight the fields that have errors whenever there's some problem while sending it.
To do that, I want to conditionally render the aria-invalid tag, because if I set it to "false", it is highlighted in green, and the behavior I want is to show only the error validation.
The piece of code is similar to the following:
<script>
export let form: ActionData;
// here I have the property "form.errors.firstName", which will be populated if I have an error
</script>
<form>
<input name="first-name" />
<!-->how to populate HTML property aria-invalid only if form.errors.firstName is thruty? I don't want to populate it as "aria-invalid='false'"</!-->
</form>
Try this:
<script>
export let form: ActionData;
// here I have the property "form.errors.firstName", which will be populated if I have an error
</script>
<form>
<input name="first-name"
class="form-input"
aria-invalid="${form.errors.firstName ? 'true' : undefined}" />
</form>
Here, we are using the ternary operator to conditionally render the aria-invalid attribute. If form.errors.firstName is true, it sets the aria-invalid attribute to "true", otherwise, it sets it to undefined.

Hiding and Showing Edit Input not working(Angular)

I'm trying to make an Edit button, with an input field that appears/disappears when the button is pressed. It was working previously, however when I tried to make a Display form, it doesn't seem to recognize the "title.value" This is very strange. I'm using Boolean for an "edit" variable combined with a *ngIf to show/hide the form. If I take the *ngIf="edit" off, it works normally as a form that displays what you're written. Am I missing something?
Here's the HTML:
<input type="text" #title *ngIf="edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
and here's the .ts:
public edit = false;
public groupTitle = "";
getTitle(val) {
this.groupTitle = val;
}
You have a problem with implementing together the ngIf directive and a reference to your input element as #title. In that case you can use hidden instead of ngIf.
Here's your html:
<input type="text" #title [hidden]="!edit"/>
<button (click)="edit = !edit">Edit</button>
<button (click)="getTitle(title.value)">Get Title</button>
<h2>{{groupTitle}}</h2>
There are couple more elegant ways to bind a value and render it on a page.
The first one is to get rid of the Get title button and use (input) method directly on an input element.
In that case, Html looks like:
<input type="text" #title *ngIf="edit" (input)="getTitle(title.value)"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
The second one is to use [(ngModel]) instead of the getTitle method and bind your input value directly to the groupTitle variable.
Html will look like:
<input type="text" #title *ngIf="edit" [(ngModel)]="groupTitle"/>
<button (click)="edit = !edit">Edit</button>
<h2>{{groupTitle}}</h2>
Your .ts file:
edit = false;
groupTitle = "";

Event for input type=number

I am a bit new to Angularjs. In Chrome, for number type input fields, pressing on up and down key arrow increases/decreases the entered value. It needs to be disabled. Any ideas or help in how it can be done?
I tried using jQuery: $(":input").bind('keyup mouseup', function () but the ng-model binding is not updating. Might be because the angular js doesn't recognize the change made with jQuery.
Model won't change inside jquery event.Use ng-keypress event in angularjs
If you need to disable it permanently better do it another way, use regular text input but restrict other chars than numbers.
<input type="text" ng-pattern="/^[0-9]*$/" />
Check out ngPattern docs
You can use ng-model directive to access the value of input in controller, and ng-disabled directive to control an input state. Hopefully the following demo may be of some help:
var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
$scope.myNumber = 0;
$scope.isDisabled = false;
$scope.toggle = function() {
$scope.isDisabled = !$scope.isDisabled;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<input type="number" ng-model="myNumber" ng-disabled="isDisabled"/>
<button ng-click="toggle()">Disable/Enable</button>
</div>
</div>

Validate URL with AngularJS and HTML 5

Good morning all:
Looks like a very common question, but after googling for hours I am not able to figure this out: how to validate an URL including www without http.
These is what I did:
Used the input type url: it does not accept www.google.com;
Changed the input type to text and used ng-pattern: I still get the www.google.com invalid;
Changed different regex but still not working.
So when I click on the submit button, I show an alert if the form is invalid (true invalid, false valid). Here is my Plunker
Thanks for the help
Instead of binding the regex to scope, you could directly add the regex to ng-pattern attribute. Like this:
<input type="text" ng-pattern="/^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/" ng-model="website">
I have updated the plunkr. Please take a look at this. Plukr
The thing here is, if you want to bind ng-pattern from controller, your regex shouldn't contain the starting and ending /s. Like this:
$scope.regex = "^(http[s]?:\\/\\/){0,1}(www\\.){0,1}[a-zA-Z0-9\\.\\-]+\\.[a-zA-Z]{2,5}[\\.]{0,1}$"
But, if you directly specify pattern like ng-pattern="/^(http|https|...)$/", you need the extra /s as well.
working plunker
Try using the ng2-validation library. It can be used to perform most validations you should ever need. Angular2 custom validation, inspired by jQuery validation.
I think we can also use AngularJs builtin URL validator.
<script>
angular.module('urlExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.url = {
text: 'http://google.com'
};
}]);
</script>
<form name="myForm" ng-controller="ExampleController">
<label>URL:
<input type="url" name="input" ng-model="url.text" required>
<label>
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.url">
Not valid url!</span>
</div>
<tt>text = {{url.text}}</tt><br/>
<tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
<tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
<tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
<tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
<tt>myForm.$error.url = {{!!myForm.$error.url}}</tt><br/>
</form>
`
if (this.resource.url.match("^(https:\/\/|http:\/\/)")) {
if (this.resource.url.match("^(https:\/\/www\.|http:\/\/www\.)?([da-z.-]+)\\.([a-z.]{2,6})")) {
}
else
{
errorMessages.push("url is invalid");
}
}
else {
errorMessages.push("url is invalid");
}
`

AngularJS - Initial value in text box is ignored when ng-model is present

I have here a html text box. It has an ng-model and an initial value on it. The problem is the initial value is not shown when there's an ng-model present and I need both of the ng-model and the initial value for the textbox.
HTML:
<input type="text"
ng-model="selPcode"
name="missionId"
value="123">
JS:
$scope.setPcode = function(site){
$scope.selPcode = site.id};
Can anyone suggest a way how to make the value show in the text box and keep the ng-model present? Thanks in advance.
Set an initial value to the ng-model on your controller's scope. Something like $scope.selPcode = 123. Set it to what your value would have been. That way, it'll display initially and then you can also change it.
Well, Angular works with two-way data binding, so why not simply set the initial value in your controller?
$scope.selPcode = 123;
This way, you'll see it in your input.
Use ng-init without having to touch the controller and keep the code in the HTML readable, like you would with the value= syntax for the standard use of the Inputbox. Plunkr here
Example Here (Controller As Syntax):
<div ng-controller="myController as my">
<h1>Hello {{my.name}}</h1>
<input type="text"
ng-init="my.selPcode=123"
ng-model="my.selPcode"
name="missionId">
</div>
Controller:
myApp.controller('myController', function($scope) {
this.name = "Gene";
});