标签: angular-forms

我正在使用 Angular 4.4.3 反应式表单来为表单中的一组控件实现自定义验证。根据文档，方法AbstractControl.setErrors更新调用该方法的 AbstractControl 的错误属性，更新其父级的状态，但不更新父级的错误属性。我想在 FormGroup 实例上设置错误属性，因此我使用 FormGroup 继承的 setErrors。但是，它不会按预期更新错误。

以下是我的示例代码：在 FormControl 实例上尝试，确实更新了它们的错误及其父级的有效性状态（但不是父级错误！）：

let myFormGroup 
    = this._formBuilder
          .group({
                   ctrl1: [null],
                   ctrl2: [null]
                 }, 
                 {
                   validator: (fg: FormGroup) => {
                                   let ctrl1 = fg.get('ctrl1'),
                                       ctrl2 = fg.get('ctrl2'),
                                       ctrl1Empty = !ctrl1.value,
                                       ctrl2Empty = !ctrl2.value;

                                       //Successfully sets ctrl1.errors and fg.status, but not fg.errors 
                                       if (ctrl1empty)
                                         ctrl1.setErrors({ctrl1required: true});
                                       //Successfully sets ctrl2.errors and fg.status, but not fg.errors 
                                       if (ctrl2Empty)
                                         ctrl2.setErrors({ctrl2required: true});
                                       //Doesn't work, doesn't update fg.errors
                                       if (ctrl1Empty && ctrl2Empty)
                                         fg.setErrors({required: true}); …

如果我在模板中放置一个实现 ControlValueAccessor 接口的自定义输入并绑定到其更改事件，如下所示：

  <input-app [value]="'initialVal'" (change)="onChange($event)"></input-app>

由于我的自定义输入不会在模糊时触发任何事件（需要明确的是，您必须专注于输入，更改它，然后模糊，然后该事件将出现在控制台中）。

<input
    type="text"
    [value]="value"/>

该onChange()方法将被调用，我不明白为什么会出现这种情况。

这是一个plnkr

好吧，我遇到了以下问题：
我有一个带有表单组和一些表单控件的表单。这些表单控件会随着设置的模糊输入而更新updateOn: 'blur'。现在，当按下提交按钮时，效果很好，但是当我按下 Enter 提交表单时，我遇到了问题。

这是重现该问题的 plunkr：https ://embed.plnkr.co/rMbRg85LK0MC6rUw99qG/

我正在为 Angular 5 中的反应形式开发一个验证器，并且在设置基于另一个输入的值的验证器时遇到困难。

表格看起来像这样：

let myRules = new FormArray([]);
myRules.push(this.newRuleFormGroup(1, 'period', 1));

this.myForm = new FormGroup({
      'name': new FormControl(name, [Validators.required, this.validate_usedName.bind(this)]), // V: must not exist already
      'icon': new FormControl(icon, [Validators.required]), // has default
      'rules': myRules
    })

'rules' 是 a FormArray，我FormGroup使用以下命令从模板中推送 new ：

newRuleFormGroup = (amount: number, period: string, repAmount: number = 1) => {
    return new FormGroup({
      'amount': new FormControl(amount, [Validators.required]),
      'type': new FormControl(period, [Validators.required]),
      'repAmount': new FormControl(repAmount, [this.validate_repAmount.bind(this)])
    })
  }

repAmount仅当 时才需要type …

单击复选框时，我会显示一个带有两个按钮的模式，接受和不接受。仅当选中接受按钮时才应选中该复选框。

出于测试目的，我尝试创建此复选框

<input type="checkbox" (change)="foo()" [checked]="false">

期望它执行我的组件的 foo 方法但从未被检查。问题是它被检查了！我来自 React 背景，这非常令人沮丧。

知道我做错了什么吗？

我也尝试过

<input type="checkbox" name="show_recurrency" (change)="foo()" [(ngModel)]="checkout.recurrency" id="show_recurrency" />

        foo(e) {
          e.preventDefault();
          console.error('foooooooooooooooo', e);
          this.checkout.recurrency = false;
          return;
        }

问候，

FormGroup我的代码中有多个 dynamic 。

此外，某些FormGroups 具有添加多个FormGroups/ FormControls 的功能。

因此，在FormGroup动态创建时，我已经使用FormBuilder.group()了多个组，但我想为其创建一个数据数组FormControl。

如何FormControl为这个数据对象数组创建动态？

角度自定义表单组件/指令和$ dirty属性

使用常规输入时，例如

<form name="myForm">
  <input type="text" ng-model="foobar">
</form>

在输入框中键入后myForm.$dirty为true。

我想创建一个简单的指令，例如

angular.module('myModule', [])
.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      fooBar: '='
    },
    template: '<div><button ng-click="fooBar=foo"></button><button ng-click="fooBar=bar"></button></div>'
  };
});

样本用法为

<form name="myForm">
  <my-directive foo-bar="myObj.foobarValue"></my-directive>
</form>

在用户单击两个按钮中的任何一个之后，myForm$dirty设置为true。

这是如何完成的？

我正在尝试建立与FormGroup和FormArray兼容的数据表。我将通过parentForm组将标头详细信息和行传递给此组件。

我创建了一个小添加按钮，单击它会动态添加新项目。在这种情况下，UI可以正常更新，但是如果我打印formGroup.value（），则只会得到传递的初始值。不是更新的formControl。我不确定我缺少什么。

export class FormTableComponent implements OnChanges {
    @Input() headers: Array<string>;
    @Input() rows: Array<any>;
    @Input() parentFG: FormGroup;
    @Input() entriesName: string;

    get entries(): FormArray {
        return <FormArray>this.parentFG.get(this.entriesName);
    }

    constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) {}

    ngOnChanges() {
        this.createFormControls();
    }

    createFormControls() {
        this.parentFG.controls[this.entriesName] = this.fb.array([]);
        this.rows.forEach(row => {
            this.entries.controls.push(this.fb.group(row));
        });
    }
}

演示

我想知道是否有人可以帮助解释为什么我无法动态更改表单输入类型？

例如

<user-input type="{{ isActive ? 'password' : 'text' }}"></user-input>

不起作用。

但这有效

<user-input type="password" *ngIf="isActive"></user-input>
<user-input type="text" *ngIf="!isActive"></user-input>

用户输入

import { Component, Input } from '@angular/core';

@Component({
    selector: 'user-input',
    templateUrl: './user-input.html'
})
export class UserInput {

    @Input()
    public isActive: boolean;

    constructor() {

    }
}

user-input.html

<input 
    type="{{ isActive ? 'password' : 'text' }}" 
    class="form-control"
    [(ngModel)]="value"
/>

user-input-password.ts

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector:
      'input[type=password][formControlName],input[type=password][formControl],input[type=password][ngModel]'
})
export class PasswordValueAccessor {

    public pattern: RegExp;

    private regexMap = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/;

    @HostListener('keypress', …

我已经为此战斗了两天。我只是不知道怎么了。看来我的自定义验证程序未执行。

如果您仅按下“下一步”按钮，则每个控件均以红色边框突出显示。如果填写表单，请在电子邮件字段中键入不同的值，然后按“下一步”，该表单是有效的，并且自定义电子邮件验证程序中看不到任何console.log。

https://stackblitz.com/edit/angular-nwhgpb