Angular 6 - 验证器模式不起作用答案

【问题标题】：Angular 6 - Validators pattern not workingAngular 6 - 验证器模式不起作用
【发布时间】：2018-09-28 19:05:53
【问题描述】：

我正在使用 Angular 6 中的响应式表单，并尝试对密码字段进行一些验证。基本上需要超过8个字符，至少包含1个大写字母，至少包含1个符号。

我测试过的正则表达式是^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})

这是我的登录组件 ts 的摘录：

  ngOnInit() {
        this.loginForm = this.formBuilder.group({
            userName: ['Username', [Validators.required]],
            password: ['Password', [Validators.pattern("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})")]]            
        });
    }

这是我的表单组 div：

 <div class="form-group">
                      <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">              
                          <div *ngIf="f.password.errors.pattern">Password must contain more than 8 characters, 1 upper case letter, and 1 special character</div>
                      </div>
                  </div>

即使密码看起来正确，基本上也不会验证密码。任何提示将不胜感激。

【问题讨论】：

你能给个“有效”的密码吗？
例如，超人*****应该可以工作

标签： angular

【解决方案1】：

ng-pattern 似乎将 regExp 作为参数（如在 angularJs 中）：

Validators.pattern(new RegExp("^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,}))")

你也可以使用 /..../

Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=.{9,})/)

应该工作;)

【讨论】：

比你好多了！
第二个选项作为魅力
感谢您尝试了第二个选项，并且效果很好。
你真是个天才！

【解决方案2】：

我认为这是由于您的 HTML 中的 *ngIf 条件造成的。]

试试*ngIf="loginForm.controls.password.hasError('pattern')"

【讨论】：

【解决方案3】：

 pattern1 =  "^[0-9_-]{10,12}$";
 phone: ['', [Validators.required, Validators.pattern(this.pattern1)]]

【讨论】：

【解决方案4】：

您需要在模式中使用 /.../ 并添加所需的验证器，这是工作示例的链接 https://stackblitz.com/edit/angular-rkxs3q

<h1 class="title">validation</h1>

<hr/>

<form class="user-form" [formGroup]="userForm" (submit)="onSubmit()">

<div class="form-group">
    <label for="type">User type:</label>
    <select id="type" formControlName="type">
  <option disabled value="null">please select user type</option>
  <option *ngFor="let userType of userTypes">{{userType}}</option>
</select>
</div>

<div class="form-group">
    <label for="name">User Name:</label>
    <input type="text" id="name" formControlName="name" />
</div>



<div class="form-group">
    <label for="address">User  address:</label>
    <input type="text" id="address" formControlName="address" />
</div>

<div class="form-group">
    <label for="password">password:</label>
    <input type="text" id="password" formControlName="password" />
</div>
 <div class="error"
 *ngIf="!userForm.get('password').valid && userForm.get('password').touched">
Password must contain more than 8 characters, 1 upper case letter, and 1 
special 
character
</div>

 <button type="submit">submit</button>
   </form>
   <hr/>

打字稿

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ValidatorFn, FormControl, 
 ValidationErrors } from '@angular/forms';
 import { Subscription } from 'rxjs';
import { Observable } from 'rxjs';



 @Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
  })
 export class AppComponent implements OnInit {
 userForm: FormGroup;
  userTypes: string[];

 private userTypeSubscription: Subscription;

 constructor(private fb: FormBuilder) { }

  ngOnInit() {
this.userTypes =["Custumer","Admin","Super Admin"]
 this.userForm = this.fb.group({
  type: [null, [Validators.required]],
  name: [null, [
    Validators.required,
    Validators.pattern(/^[A-z0-9]*$/),
    Validators.minLength(3)]
  ],
  address: null,
  password: [null, [
    Validators.required,Validators.pattern(/^(?=.*[A-Z])(?=.*[!@#\$%\^&\*])(?=. 
     {9,})/)]
  ]
});
  }
 }

【讨论】：

【解决方案5】：

如果要验证数值，请检查输入的 type 属性。如果它是数字类型的输入，那么某些浏览器不会将任何非数字值传递给验证器，因此如果您在验证器数组中声明了 Validators.required，您的地图中就会出现必需的错误。

【讨论】：