Angular 2 function for checking form input

Question

I'm new to Angular.js 2 and i want to check a input value for age that if the value was lower than 18 it shows the danger text I tried this but it didn't work can you give me a solution or correct the code?

@Component({
    selector: 'myForm',
    template:`
<div class="form-group">
        <label>age</label>
        <input type="number" class="form-control" [(ngModel)]="age">
        <p class="text-danger" [style.display]="ageCheck(54) ? 'block' : 'none' ">You cannot register you're under 18!</p>
</div>
`
})

export class FormComponent {

ageCheck(age: number){
    if(age>=18) {
        return true;
    }
    return false;
}

Stephan Bourges · Accepted Answer · 2016-06-24 18:39:50Z

1

I tend to use ng-show or ng-if in that case instead of playing directly with the style. This would look like (not tested):

<div class="form-group">
    <label>age</label>
    <input type="number" class="form-control" ng-model="age">
    <p class="text-danger" ng-show="age>18">{{age}}</P
    <p class="text-danger" ng-show="age<=18">You cannot register you're under 18!</p>
</div>

That would do exactly what you ask above. Since this looks more like a validation you can create your validator to be more inline with angular philosophy by implementind a directive in your module.

myModule.directive('ageCheck', function() {
    return {
        require: "ngModel",
        link: function(scope,element,attributes,ngModel) {
            ngModel.$validators.ageCheck=function(modelValue) {
                return scope.age>18;
            }
        }
    }
});

<form name="action">
<div class="form-group">
<label>age</label>
<input type="number" name="ageField" class="form-control" ng-model="age" age-check>
<p class="text-danger" ng-show="action.ageField.$error.ageCheck">You cannot register you're under 18!</p>
</div>

If you are new to Angular I strongly suggest to go through their official tutorial which is much better then others I did before. It really brings help me understand the injector/module/minification. You should also start your project using the seed.

answered Jun 24, 2016 at 18:39

Stephan Bourges

315 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

micronyks Over a year ago

This is to inform you that this question belongs to Angular2. You have come up with Angular1 solution.

null canvas · Accepted Answer · 2016-06-24 19:27:00Z

1

Use the min

        <label for="age">Age</label>

        <input type="number" min="18" class="form-control" required
          [(ngModel)]="model.age" name="age"  #age="ngModel" >

        <div [hidden]="age.valid || age.pristine" class="alert alert-danger">
          Age is required, should be 18+
        </div>

Note: user angular 2 RC3 for #age="ngModel" to work

edited Jun 24, 2016 at 19:27

answered Jun 24, 2016 at 18:28

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

Comments

micronyks · Accepted Answer · 2016-06-24 18:37:59Z

0

No need to use ageCheck function,

this should work I guess,

<p class="text-danger" [style.display]="age<=18 && age!=undefined ? 'block' : 'none' ">You cannot register you're under 18!</p>

https://plnkr.co/edit/aKqBBly2zlT3pijmnwEM?p=preview

OR

<p class="text-danger" [style.display]="ageCheck(age) ? 'block' : 'none' ">You cannot register you're under 18!</p>

ageCheck(age: number){ 

    if(age<=18 && age!=undefined) {
        return true;
    }
    return false;
}

edited Jun 24, 2016 at 18:37

answered Jun 24, 2016 at 18:10

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

2 Comments

Mohammad Reza Over a year ago

actually as i said I'm new to angular and I want to practice using function , is there any way to use the function?

micronyks Over a year ago

Check my link and answer. With and without a function.

Collectives™ on Stack Overflow

Angular 2 function for checking form input

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related