标签: angular-reactive-forms

我正在使用 Angular Forms 开发一个表单，但我遇到了一个死胡同，我想仅当第一个输入字段不为空时才向第二个输入字段添加验证。

假设我有两个输入字段：姓名和年龄。因此，当在姓名中输入某些内容时，只有年龄才会被设置为必填。我在表单中使用 FormGroup 和 FormControl，这就是组件文件现在的样子，没有年龄验证器：

class Component implements OnChanges {
  @Input() name: string;
  @Input() age: string; 

  form = new FormGroup({
    name: new FormControl(''),
    age: new FormControl('')
  });

  ngOnChanges(changes) {

    if (changes.name?.currentValue !== changes.name?.previousValue) {
      this.setName(changes.name.currentValue);
    }

    if (changes.age?.currentValue !== changes.age?.previousValue) {
      this.setAge(changes.age.currentValue);
    }
  }

  setName(name) {

    this.form.patchValue({
      name,
    });

    if (name) {
      this.form.get('age').setValidators([
         Validators.required,
         this.form.get('age').validator
      ]);
    } 
    
  }

  setAge(age) {
    this.form.patchValue({
      age,
    });
  }

}

这是模板：

<custom-input
      label="Name"
      placeholder="name"
      name="name"
      formControlName="name"
></custom-input>

<custom-input
      label="Age"
      placeholder="age"
      name="age"
      formControlName="age" …

这是我的代码

detailsGroup = new FormGroup({
    userId:new FormControl('1'),
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    email: new FormControl('',[ Validators.required, Validators.email]),
  });

我希望如果userId equal to 1名字、姓氏和电子邮件不需要， otherwise这 3 个字段将更改为必填，并且电子邮件还验证电子邮件地址。

谢谢

我将项目迁移到 Angular 15，无法再直接使用 FormsBuilder 来实现响应式表单。我收到一个未定义的异常：

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'group')
TypeError: Cannot read properties of undefined (reading 'group')

这是我的代码：

 settingsForm = this.formBuilder.group({
    locations: ''
  });

  constructor(private formBuilder: FormBuilder) {}

之前一切都很好。一个有效的解决方案是通过生命周期钩子 NgOnInit。然而，这将是不推荐的方式，我会失去隐式打字。

可能是什么原因？

我正在使用Angular 4反应形式创建一个下拉列表

<select id="city" formControlName="city" (change)="onCitySelect($event)" >
    <option *ngFor="let city of cities" [ngValue]="city" >
        {{ city }} 
    </option>
</select> 

在下拉列表中选择一个值时，我想调用一个方法并显示所选值。

这是我的代码

onCitySelect(event) {
    console.log(event.target.value);
}

我希望它能打印下拉列表中所示的城市名称。但是，它似乎也显示索引号。例如，

2: London

而不是London下拉列表中实际显示的内容。

没有索引如何获取城市名称？

我有一个简单的形式:

this.searchForm = this.formBuilder.group({
  query: [ null, [Validators.required] ]
});

当用户将某些内容粘贴到输入中时,我使用正则表达式重新格式化值并更新表单.

onPaste(event) {
    const formattedQuery = event.clipboardData.getData('text/plain')
      .split(/,?[\r\n\t]+\s?/)
      .join(', ')
      .replace(/,\s?$/g, '');

    this.searchForm.get('query').setValue(formattedQuery);
    // this.ref.detectChanges();
  }

但是,当我粘贴一些东西时,例如

325435956
325435956

它复制它,因此我看到,325435956, 325435956 325435956 325435956但我希望看到325435956, 325435956.我的错误在哪里以及如何解决？

您可以在这里找到工作示例https://stackblitz.com/edit/angular-cp9yhx?file=app%2Fhello.component.ts

我有一个简单的搜索组件，其中包含带有2个元素的反应形式：

• 文字输入（搜索任意匹配的文字）
• 复选框（包括/排除已删除的结果）

到目前为止，我使用它myFormGroup.valueChanges.subscribe(...)来执行搜索方法。

现在的问题是，我想对文本输入进行反跳操作。同时不要取消反跳复选框，因此单击该复选框时，搜索方法将立即执行。

valueChanges.debounceTime(500)当然，使用will会反跳整个表单。那不是我想要的

这是一个简化的示例。实际形式还有更多输入。有些应该去抖动，有些则不应该。

有没有简单的方法可以做到这一点？还是我必须分别订阅每个表单控件？

很高兴看到您是如何解决此问题的。

提前致谢。

编辑：代码

export class SearchComponent {

  myFormGroup: FormGroup;

  constructor(fb: FormBuilder) {
    this.myFormGroup = fb.group({
      textInput: '',
      checkbox: false
    });
  }

  ngOnInit() {
    this.myFormGroup.valueChanges.subscribe(val => {
      // debounce only the textInput,
      // and then execute search
    });
  }

}

这是使用此库的基本用例。我需要验证该号码是否有效。我使用角度反应形式 自定义验证器。
验证程序在文件中：validators/phone-number.validator.ts
第一步是获取google-libphonenumber PhoneNumberUtil实例

我的代码的当前状态是：

import { ValidatorFn, AbstractControl } from '@angular/forms';
import phoneUtil = require('google-libphonenumber');
const phoneUtilInstance = phoneUtil.PhoneNumberUtil.getInstance();

export function PhoneNumberValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    if (!phoneUtilInstance.isValidNumber(control.value)) {
      return { 'wrongNumber': { value: control.value } };
    }
    return null;
  }
}

以反应形式使用（file contact.component.ts）：

import { PhoneNumberValidator } from '@app/validators';
...
ngOnInit(): void { ...
this.editPhoneForm = this.formBuilder.group({
  id: [''],
  phone: ['', [
    Validators.minLength(3),
    PhoneNumberValidator()
  ]], …

我有一个名为的自定义验证器函数productionControlValidator。

如果我像这样设置表单，那么一切正常：

this.validTest = new FormGroup({
    isdrawing: new FormControl(true),
    inventoryControl: new FormControl(null)
}, { validators: productionControlValidator });

但是，如果我使用这样的表单构建器设置表单：

this.validTest = this.fb.group({
    isdrawing: true,
    inventoryControl: null
}, { validators: productionControlValidator });

在fb构造函数中将定义为private fb: FormBuilder，则验证无效。“不起作用”是指表单的有效属性不正确，并且在控制台中没有看到我期望的输出（确实使用第一种方法显示）。

我不是在第二种方法中正确定义了验证器（如果是这种情况，应该如何定义），还是FormBuilder出现某种使自定义验证器不可用的事情？

因此，我创建了一个自定义验证器，以验证“新密码”字段和“确认密码”字段是否匹配。在组件级别，它很棒。仅当两个输入不匹配时才会显示错误消息。

问题是，我禁用了提交按钮，直到表单有效为止，但是当我使用此自定义验证器时，整个表单永远不会通过验证。填写for表单时，所有组件验证都会通过，但表单验证不会通过。

我在这里想念什么？

定制验证器代码如下所示：

import {FormGroup, ValidationErrors, ValidatorFn} from "@angular/forms";

export const matchingInputsValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  let pass = control.get('NewPassword').value;
  let confirmPass = control.get('ConfirmPassword').value;
  return pass === confirmPass ? { matchingInputs: true } : { matchingInputs: false };
};

我将自定义验证器导入我的组件，并在组件中声明我的表单控件，如下所示：

expiredPasswordForm: FormGroup;
oldPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));
newPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));
confirmPassword = new FormControl('', Validators.compose([Validators.required, Validators.minLength(4)]));

在我的ngOnInit（）生命周期挂钩中，我像这样创建表单组：

this.expiredPasswordForm = this.fb.group({
      'OldPassword': this.oldPassword,
      'NewPassword': this.newPassword,
      'ConfirmPassword': this.confirmPassword
    }, { validator: matchingInputsValidator}); …

使用angular 7和Bootstrap 4，我想将Bootstrap 4输入包装在一个自定义组件中，以减少模板中的样板。

我希望最终的主要组件如下所示：

<form [formGroup]="myForm" (submit)="submit(myForm.value)">

    <app-form-control label="Lastname" placeholder="Lastname" formControlName="lastName"></app-form-control>
    <app-form-control label="Firstname" placeholder="Firstname" formControlName="firstName"></app-form-control>

    <button class="pull-right" type="submit">
        SUBMIT
    </button>
    <button (click)="reset()">
        RESET
    </button>
</form>

我的formGroup是这样创建的：

public createFormGroup() {
    return this.fb.group({
        firstName: [null, Validators.required],
        lastName: [null, Validators.required],
    });
}

app-form-control的模板应如下所示：

<div class="form-group row">
  <label class="col-2 col-form-label">{{label}}</label>
  <div class="col-10">
    <input class="form-control" placeholder="{{placeholder}}" [formControlName]="formControlName" autocomplete="nope"/>
  </div>
</div>

但是我不知道如何编写组件（使用TypeScript）。如何将外部formControlName属性绑定到内部输入字段？如何使验证工作？