标签: angular-validation

我有以下表格:

如果我点击星号,输入将自动填充所点击的星号.(单击第3颗星,输入将填充数字'3',如下图所示)

明星的输入是ng-required="true".

<form name="completeSurveyForm" role="form" novalidate ng-submit="vm.save()">
    <ul class="question-list">
        <li data-ng-repeat="question in vm.survey.questions | orderBy:'conditionalOrderId' track by question.id ">
            <small class="label label-primary pull-right">{{question.questionTypeName}}</small>
            <h3>
                <b>{{$index +1 }}.</b>&nbsp;{{question.questionBody}}
            </h3>
            <hr> <!-- Replace here with directives -->
            <div data-ng-switch="question.questionType">
                <numericrange question="question" data-ng-switch-when="NUMERIC_CHOICE" />
            </div>
        </li>
    </ul>
    <button type="submit" ng-disabled="completeSurveyForm.$invalid " class="btn btn-primary">
        <span data-translate="fqApp.business.form.submit">Submit</span>
    </button>
</form>

而numericrange指令如下所示:

<div class="row">
    <div class="col-md-2" ng-if="!completed">
        <div>
            <span ng-mouseover="showHovered($event)" ng-mouseleave="clearStars($event)" ng-click="selectStar($event)"
                data-ng-repeat="sym in range(startNonActive(question), question.maxValue, 1)" class="{{question.symbol}} starred-element" value="{{$index}}">
            </span>

            <input type="number" name="{{question.id}}" …

我正在开发一个新的基于 Angular 的应用程序，其中包含一个基于电子邮件和密码的登录表单。

它有这些字段的表单，由以下几行定义：

let formConfig = {
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required]],
};

this.form =  this.formBuilder.group(formConfig)

它按预期工作，除了一种情况：

当用户使用三星（和其他人）的自动完成功能来填充电子邮件字段时，它会在电子邮件后插入一个空格，并Validators.email假定这是一封无效的电子邮件。

我的问题是如何解决这种特殊情况？

我很确定我可以放置一些现有的电子邮件验证正则表达式，但我讨厌重新发明轮子，如果验证器存在，创建另一个看起来很疯狂。

是否可以实现某种验证器来修改我的表单控件值以去除空格？

我在我的项目中处理了 10 多个带有许多输入字段的表单。问题是我的字段将空格作为值。至于现在我所做的是在更改时获取字段的值并修剪它并用 0 检查长度。如果是，则抛出“不使用空格”，否则取值。

<input (change)='check($event)'>

check(data){
   if(data.trim() === 0 ){
       console.log('contains empty spaces'   
   }else{
        console.log('contains data') 
   }
}

但是随着字段或表单的增加，这将是一个令人头疼的问题。所以我试图把它作为通用模块。所以我会像服务一样使用它。

注意：验证应该发生在借口上（即）'HelloWorld' 应该抛出错误但'Hello World' 不应该。谁能给我一些想法或建议来解决这个问题..

提前致谢

我有一个Angular 6响应式表单，试图用正则表达式模式验证密码，但是它不起作用。

               <div class="form-group">
                    <label for="password">Password</label>
                    <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.required">Required</div>
                        <div *ngIf="f.password.errors.pattern">Not valid</div>
                    </div>
                </div>

我正在使用的正则表达式是这样的：

 ngOnInit() {
     this.registerForm = this.formBuilder.group({
           password: ['', [Validators.required, Validators.pattern('^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$')]],

      });
  }

无论我输入什么密码，都会在用户界面中收到错误消息 Not valid

知道我在做什么错吗？

我正在尝试使用Reactive Form在Angular7中使用Validators.minLength和Validators.maxLength，但出现以下错误：

错误错误：期望的验证程序返回Promise或Observable。

这是我的打字稿代码：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from 
  '@angular/forms';

@Component({
    selector: 'app-input-values',
    templateUrl: './input-values.component.html',
    styleUrls: ['./input-values.component.css']
})

export class InputValuesComponent implements OnInit {
   inputValuesForm: FormGroup;

constructor(private fb: FormBuilder) { }

ngOnInit() {
    this.inputValuesForm = this.fb.group({
    interestRate: ['', Validators.required, Validators.minLength(2), 
       Validators.maxLength(5)]

 })
}

这是我的模板html：

<form [formGroup]="inputValuesForm" (ngSubmit)="onSubmit()" class="form-horizontal">
  <div class="panel panel-primary">
    <div class="panel-heading">
       <h3 class="panel-title">Input Data</h3>
    </div>

    <div class="panel-body">
      <div class="form-group" [ngClass]="{'has-error': inputValuesForm.get('interestRate').errors &&
     (inputValuesForm.get('interestRate').touched || inputValuesForm.get('interestRate').dirty)}">
        <label class="col-sm-4 control-label" …

我正处于迁移到 Angular 7 的第一周，我一直在使用基于模板的基本验证在我的项目中制作基本表单，但我现在需要根据一个字段的值必须高于其他

我已经尝试在组件控制器中使用这些值本身，但是虽然我能够确认这些值是否有效，但我无法使用此代码向用户显示问题所在

if (issueThresholdForm.value.lowScore > issueThresholdForm.value.highScore) {
  // Show user error
  // This is the messing part, I guess
}

这是我正在使用的模板

<div *ngIf="_issueCategory">
  <form (submit)="submitIssueThreshold(issueThresholdForm)" #issueThresholdForm="ngForm">
    <mat-form-field class="half-width" floatLabel="always">
      <mat-label [translate]="'issueThreshold.modals.highScore'"></mat-label>
      <input name="highScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.highScore"
        required #highScore="ngModel">
    </mat-form-field>
    <mat-form-field class="half-width" floatLabel="always">
      <mat-label [translate]="'issueThreshold.modals.lowScore'"></mat-label>
      <input name="lowScore" type="number" matInput placeholder="0" [(ngModel)]="_issueCategory.lowScore"
        required #lowScore="ngModel">
    </mat-form-field>
    <mat-form-field class="full-width" floatLabel="always">
      <mat-label [translate]="'issueThreshold.modals.description'"></mat-label>
      <textarea name="description" matInput [(ngModel)]="_issueCategory.thresholdDescription">
            </textarea>
    </mat-form-field>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal" [translate]="'modal-confirm.cancel'"></button>
      <button type="submit" class="btn btn-primary …

我对反应式表单字段验证的这个特定用例有以下问题。

目前我只设置了这个规则：

this.projectForm = this.fb.group({
  .....................................................................................,
  .....................................................................................,
  .....................................................................................,
  CIG: [null, [Validators.required, Validators.minLength(10),Validators.maxLength(10)]],

目前我正在检查插入到我的CIG表单字段中的值是否正好有 10 个字符作为长度。

我的问题是我还必须检查这是一个字母数字字符串（由 10 个字符组成）。

所以这样的事情是允许的：ABCED12345但不允许这样的事情：ABCD-12345

如何使用Validators实现这种行为？我需要使用 REGEX 或类似的东西吗？

我使用Angular 6和Angular Material 6.我想要mat-chip字段.当我输入mat-chip字段时,将启用保存按钮,否则将被禁用.输入字段是必需的,但不能要求mat-chip字段.请帮我找到解决方案.谢谢.

我的示例代码链接在这里:stackblitz demo

我需要实现依赖于多个表单字段的异步验证，所以我将验证放在FormGroup. 但是没有调用验证函数。当然我错过了一些东西。

heroForm: FormGroup;

  ngOnInit(): void {
    this.heroForm = new FormGroup({
      'name': new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        forbiddenNameValidator(/bob/i)
      ]),
      'alterEgo': new FormControl(this.hero.alterEgo, {        
        updateOn: 'blur'
      }),
      'power': new FormControl(this.hero.power, Validators.required)
    }, null,this.validate.bind(this));
  }

  validate(
    ctrl: FormGroup
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    console.log(ctrl)
    return this.heroesService.isAlterEgoTaken(ctrl.controls.alterEgo.value).pipe(
      map(isTaken => { 
        console.log(isTaken);
        return (isTaken ? { uniqueAlterEgo: true } : null)
        }),
      catchError(() => null)
    );
  }

在这里创建了一个演示：https : //stackblitz.com/edit/angular-xtqhqi