代码之家 › 专栏 › 技术社区 › Thilina Sampath Alexander

模糊的角度6-形式验证

angular6

0

Thilina Sampath Alexander · 技术社区 · 6 年前

我想验证onBlur中填写的输入如何做到这一点。请帮帮我。

<form class="form-horizontal" role="form" name="form" id="form"
                (ngSubmit)="f.form.valid && onSubmit()"
                #f="ngForm" novalidate>

    <input type="text" class="form-control" placeholder="Social Id"
        [ngModel]="generalUserData.socialId" [maxlength]=12 name="socialId" [minlength]=10
        (blur)="onBlurMethod($event.target.name, $event.target.value ,generalUserData)"
        #socialId="ngModel" [ngClass]="{ 'is-invalid': f.submitted && socialId.invalid }"
        pattern="\d{9}(v|V)|\d{12}" required/>
    <div *ngIf="f.submitted && socialId.invalid" class="invalid-feedback">
        <div *ngIf="socialId?.errors.required">NIC is required</div>
        <div *ngIf="socialId?.errors.minlength">NIC must be at least 10 characters long.</div>
        <div *ngIf="socialId?.errors.pattern">Not valid NIC</div>
        <div *ngIf="socialId?.errors.maxlength">NIC must be less than 12 characters long.</div>
    </div>
</form>

我用了下面的例子 link 然后我想验证一下在blur上我该怎么做。

2 回复 | 直到 6 年前

1

quicklikerabbit 5 年前

这个 onBlur() 方法从角度5开始改变。对于模板驱动的表单,您需要使用以下语法:

<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">

下面是演示,希望对您有所帮助:

https://codingthesmartway.com/angular5-forms-update/

2

0

Thilina Sampath Alexander 6 年前

我像这样更新下面的代码

<input type="text" class="form-control" placeholder="Social Id"
    [ngModel]="generalUserData.socialId" [maxlength]=12 name="socialId" [minlength]=10
    (blur)="onBlurMethod($event.target.name, $event.target.value ,generalUserData)"
    #socialId="ngModel" [ngClass]="{ 'is-invalid': (f.submitted || socialIdType.touched) && socialId.invalid }"
    pattern="\d{9}(v|V)|\d{12}" required/>
<div *ngIf="(f.submitted || socialIdType.touched) && socialId.invalid" class="invalid-feedback">
    <div *ngIf="socialId?.errors.required">NIC is required</div>
    <div *ngIf="socialId?.errors.minlength">NIC must be at least 10 characters long.</div>
    <div *ngIf="socialId?.errors.pattern">Not valid NIC</div>
    <div *ngIf="socialId?.errors.maxlength">NIC must be less than 12 characters long.</div>
</div>

现在一切正常。