如何验证我的数字输入字段仅接受整数而不接受任何类型的小数（逗号/点）？

代码

Component

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

this.savingData = this.formBuilder.group({
  amount: ['', Validators.required], // only accept integer 123000
});

HTML

<ion-input type="number" min="1" inputmode="numeric" formControlName="amount" placeholder="{{ 'SAVINGS.amount' | translate }}" ></ion-input>

任何想法？

我正在尝试formGroup根据特定条件在控件中添加和删​​除验证器。

当我更新formGroup.updateValueAndValidity()整个表单的验证器时，它没有更新，好像我专门申请每个控件，即formGroup.get('formControl').updateValueAndValidity()，它正在工作，但我必须为每个控件编写，我希望这不是正确的方法。我究竟做错了什么？

if (data == 'x') {
    this.myForm.get('control2').setValue(null);
    this.myForm.get('control2').setValidators(Validators.nullValidator);
    this.myForm.get('control1').setValidators(Validators.required);
} else if (data == 'y') {
    this.myForm.get('control1').setValue(null);
    this.myForm.get('control1').setValidators(Validators.nullValidator);
    this.myForm.get('control2').setValidators(Validators.required);
}
this.myForm.get('control1').updateValueAndValidity();
this.myForm.get('control2').updateValueAndValidity();

这是有效的，但是，

this.myForm.updateValueAndValidity();

这是行不通的。

我正在使用 Angular 7 和材料设计组件

我需要将 requireMatch 验证添加到 mat-autocomplete 中。

我已经使用参数创建了自定义验证，但参数值确实会动态变化。

下面是我的组件代码。

this.stepFormGroup = this.formBuilder.group({
    AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});

////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
    return (control: FormControl) => {
        const selection: any = control.value;
        console.log("accessCodes", accessCodes, "selection", selection);
        if (accessCodes.indexOf(selection)===-1) {
            return { requireMatch: true };
        }
        return null;
    }
}

accessCodes我面临的问题是我的内部总是空的（init）requireMatch。

的更改this.accessCodeList不会反映到验证器。

意味着更改后this.accessCodeList它不会在requireMatch验证器中获得更新的数组。

那么有人知道如何在自定义验证器中传递动态参数吗？

所以我有一个表单，其中仅当另一个控件有值时才需要一个控件，为此我创建了以下结构

 profileGroup = this.fb.group({
username: [''],
address: [
  '',
  [
    (control: AbstractControl) => {
      if (this.profileGroup?.get('username')?.value) {
        return (Validators.required)(control);
      }
      return (Validators.nullValidator)(control);
    },
  ],
],

});

这个函数效果很好，一旦username 控件获得一个值，aValidators.required就会添加到address控件中。但是，尽管添加了验证器，但控件的有效性address并未更新，因此控件仍标记为valid。

如果可能的话我想避免使用类似的东西

this.profileGroup.get('username')?.valueChanges.subscribe(val=>{
  this.profileGroup.get('address')?.updateValueAndValidity()
})

因为可能存在我不知道名称的动态控件，并且不想为每个控件设置一个可观察对象。

这是一个工作示例的堆栈闪电战 https://stackblitz.com/edit/angular-10-formbuilder-example-m8qjq8?file=src/app/app.component.ts

我有表单，我想在提交时验证日期字段，我正在使用表单生成器，我该怎么做（角度方式）？另一个问题为什么我看不到日期字段中的值published_date？我试图搜索，但找不到输入日期字段的解决方案。

unamePattern = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
  ngOnInit() {
    this.book = 
      {
        id: 55,
        author_name : "vv",
        published_date :  new Date('01/02/2018'),
        title : "cc"
      };
      
      this.form = this.formBuilder.group({
        title : ['', Validators.required],
        author : ['', Validators.required],
        datePublish: ['', Validators.pattern(this.unamePattern)],
        }
      );
  }

<input 
            [(ngModel)]="book.published_date"
            id="dateOfBirth" 
            class="form-control" 
            placeholder="yyyy-mm-dd" 
            name="dp" 
            ngbDatepicker 
            formControlName="datePublish"
            #dp="ngbDatepicker">
            
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="dp.toggle()" type="button">
                <i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
          </div>

如何将required验证器设置为可选是反应形式。我有两个输入amount和volume. 如果用户选择amount单选按钮，则必须从输入中删除所需的验证volume。如果volume，必须从amount

应用程序.html

  <form #recForm="ngForm" name="form" [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>
        <div class="label">
          <mat-label>Charged by</mat-label>
        </div>
        <mat-radio-group (change)="onChargesType($event)">
          <mat-radio-button
            *ngFor="let charges of chargedBy; let i = index"
            [checked]="i === 0"
            [value]="charges"
            >{{ charges }}</mat-radio-button
          >
        </mat-radio-group>
      </div>

      <mat-form-field *ngIf="!isAmount">
        <input formControlName="volume" matInput placeholder="Volume" />
      </mat-form-field>
      <mat-form-field *ngIf="isAmount">
        <input formControlName="amount" matInput placeholder="Amount" />
      </mat-form-field>
  </form>

应用程序

chargedBy: string[] = ['amount', 'volume'];

  ngOnInit() {
    this.isChargedByAmount = true;
    this.form = this.fb.group({ …

我有一个输入，当用户单击对话框时将填充该输入。因此，为此我必须将其禁用，因为我不希望用户手动输入该值。唯一的问题是这个输入必须是必需的，而我到目前为止还做不到。

我尝试在输入中添加“required”指令，并尝试在创建表单时添加 Validator.required，但这些都没有成为表单所需的字段。

createUnityForm(): FormGroup {
    return this._formBuilder.group({
        id      : [this.unity.id],
        description: [this.unity.description],
        floor: [{value: this.unity.floor, disabled: true}, Validators.required]
    });
}

<mat-form-field appearance="outline" floatLabel="always" class="mr-16" fxFlex>
    <mat-label>{{'UNITY.FLOOR' | translate}}</mat-label>
    <input matInput placeholder="{{'UNITY.SELECT-FLOOR' | translate}}"
        name="floor"
        formControlName="floor"
        required>
</mat-form-field>

<button *ngIf="action === 'edit'"
    mat-button
    class="save-button"
    (click)="matDialogRef.close(['save',unityForm])"
    [disabled]="unityForm.invalid"
    aria-label="save">
        {{'GENERAL.SAVE' | translate}}
</button>

即使输入中没有任何内容，unityForm 也是有效的

例如我有一个输入，我添加了多验证条件，如：required、mail和pattern，所以任何一个失败都会导致controls.status给我“INVALID”，如果我想知道哪个失败了我该怎么办?

我有一个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

知道我在做什么错吗？