typescript 如何验证角形

brccelvz  于 2023-01-21  发布在  TypeScript
关注(0)|答案(2)|浏览(114)

我有这个登记表。我试图验证它,但徒劳的。输入保存在我的数据库中,尽管他们是空的我想有这些验证:

  • 所有输入都是必需的
  • 电子邮件地址应有效
  • 名称只能由字母组成
  • 密码应至少包含8个字符,至少包含1个大写字母、1个小写字母和1个数字

我想在每一个无效输入下都有一个消息。(例如在<div id="na"></div>中)。请问我该怎么做?
HTML文件

<h2 class="text-center">Inscription</h2>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron">
<form [formGroup]="angForm" (ngSubmit)="postdata(angForm)" autocomplete="off">
<div class="form-group mb-3">
<label for="name">Nom</label>
<input type="text" name="name" formControlName="name" autocomplete="off" id="name" 
class="form-control input-sm" placeholder="Nom">
</div>
<div id="na"></div>
<div class="form-group mb-3">
<label for="email">Email</label>
<input type="email" name="email" formControlName="email" autocomplete="off" id="email" 
class="form-control input-sm" placeholder="Email">
</div>
<div id="mail"></div>
<div class="form-group mb-3">
<label for="Password">Mot de passe</label>
<input type="password" name="Password" formControlName="password" autocomplete="off" 
id="password" class="form-control input-sm" placeholder="Mot de passe">
</div>
<div id="pwd"></div>
<button type="sumit" class="btn btn-success">Enregistrer</button>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>

类型脚本文件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators, NgForm } from '@angular/forms';
import { first } from 'rxjs/operators';
import { Router } from '@angular/router';
import { ApiService } from '../api.service';
@Component({
selector: 'app-inscription',
templateUrl: './inscription.component.html',
styleUrls: ['./inscription.component.css']
})
export class InscriptionComponent implements OnInit {
angForm: FormGroup;
constructor(private fb: FormBuilder,private dataService: ApiService,private router:Router) {
this.angForm = this.fb.group({
email: [],
password: [],
name: [],
mobile: []
});
}
ngOnInit() {
}
postdata(angForm1:any){this.dataService.userregistration(angForm1.value.name,angForm1.value.email,angForm1.value.password)
.pipe(first())
.subscribe(
data => {
this.router.navigate(['login']);

},
error => {
});
}
 get email() { return this.angForm.get('email'); }
 get password() { return this.angForm.get('password'); }
 get name() { return this.angForm.get('name'); }
 }

先谢了

p3rjfoxz

p3rjfoxz1#

this.angForm = this.fb.group({
email: ['', Validators.required, Validators.email],
password: ['', Validators.required, Validators.minLength(8), Validators.pattern("(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}")],
name: ['', Validators.required, Validators.pattern('^[a-zA-Z ]*$')],
mobile: [null, Validators.required, Validators.minLength(10), Validators.maxLength(10)]
});

这是验证的语法。

In HTML, before closing of form-group div write
 <span class="text-danger"
       *ngIf="(angForm.name.touched || submitted) && 
                angForm.name.errors?.required">
                                Name is required
                            </span>

 <span class="text-danger"
       *ngIf="((angForm.password.touched || submitted) && 
                angForm.password.errors?.required )|| (angForm.invalid && submitted)">
Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters </span>

同样适用于HTML格式的电子邮件、移动的错误消息。
请参阅React式表单验证。https://www.freecodecamp.org/news/how-to-validate-angular-reactive-forms/

mf98qq94

mf98qq942#

回复Rothitha如果您不想使用“辅助变量”submitted,您可以在提交时使用。

submit(form:FormGroup)
{
   if (form.invalid)
      form.markallAsTouched()
   else
   {
      ..doSomething..
   }
}

如果我们能更好地管理错误(删除这个丑陋的*ngIf="angForm.get('password').touched && angForm.get('password').touched",我们可以使用tecnica类似的 Bootstrap 管理错误
我们使用一个.css像

.invalid-feedback
{
   display:none
}
.ng-invalid.ng-touched ~ .invalid-feedback
{
  display: block;
}

和一个类似于

<!--enclosed all under a div-->
  <div>

    <!--a label-->
    <label for="email">Email</label>

    <!--a input-->
    <input id="email" formControlName="email">

    <!--a div class="invalid-feedback-->
    <div class="invalid-feedback">

      <!--if there're several validators use *ngIf-->
        <div *ngIf="angForm.controls.email.errors?.required">Email is required</div>
        <div *ngIf="angForm.controls.email.errors?.email">it's not a valid email</div>
    </div>

  </div>

参见stackblitz

相关问题