Question

我是Angular.js 2的新手，我想检查年龄的输入值，如果该值低于18，则显示我试过的危险文本，但它不起作用你能给我一个解决方案或更正代码吗？

@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;
}

Answer 1

使用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>

注意：#age="ngModel"的用户角度为2 RC3

Answer 2

在这种情况下，我倾向于使用ng-show或ng-if而不是直接使用样式。这看起来像（未经测试）：

to_datetime

这完全符合你的要求。由于这看起来更像是验证，因此您可以通过在模块中实现指令来创建验证器，使其更符合角度哲学。

<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>

如果您是Angular的新手，我强烈建议您完成他们的官方教程，这比我之前做过的其他教程要好得多。它真的带来帮助我理解喷射器/模块/缩小。您还应该使用seed启动项目。

Answer 3

无需使用ageCheck功能，

这应该可行，我想，

<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;
}

Angular 2函数用于检查表单输入

3 个答案: