标签: angular-reactive-forms

我试图弄清楚如何在反应形式中使用管道,以便输入被强制为货币格式.我已经为此创建了自己的管道,我已经在代码的其他区域进行了测试,所以我知道它可以作为一个简单的管道工作.我的管道名称是'udpCurrency'

我在堆栈溢出上找到的最接近的答案就是这个:在Angular2-View中的INPUT元素中使用ngModel中的管道然而这在我的情况下不起作用,我怀疑它与我的表单是被动的事实有关

以下是所有相关代码:

模板

<form [formGroup]="myForm" #f="ngForm">
  <input class="form-control col-md-6" 
    formControlName="amount" 
    [ngModel]="f.value.amount | udpCurrency" 
    (ngModelChange)="f.value.amount=$event" 
    placeholder="Amount">
</form>

组件

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

export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(
    private builder: FormBuilder
  ) {
    this.myForm = builder.group({
      amount: ['', Validators.required]
    });
  }    
}

错误:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: '. Current value: 'undefined: undefined'

正如Angular 文档所说,我们可以formControlName在表单中使用:

<h2>Hero Detail</h2>
<h3><i>FormControl in a FormGroup</i></h3>
<form [formGroup]="heroForm" novalidate>
    <div class="form-group">
        <label class="center-block">Name:
            <input class="form-control" formControlName="name">
        </label>
    </div>
</form>

正如他们所说...

没有父FormGroup,[formControl] ="name"之前工作,因为该指令可以单独使用,也就是说,它可以在不在FormGroup中的情况下工作.对于父FormGroup,名称输入需要语法formControlName = name才能与类中的正确FormControl相关联.此语法告诉Angular查找父FormGroup,在本例中为heroForm,然后在该组内查找名为name的FormControl.

无论如何,几个月前我问这个,找出formControlName和之间有什么区别[formControl].

现在我的问题是:如何使用formControlName嵌套的FormGroups？

例如,如果我有以下表单结构:

this.myForm = fb.group({
    'fullname': ['', Validators.required],
    'gender': [],
    'address': fb.group({
        'street': [''],
        'houseNumber': [''],
        'postalCode': ['']
    })
});

使用"绑定"街道(或"houseNumber"或"postalCode")到相关HTML元素的正确方法是formControlName什么？

我正在尝试实现自定义验证器来检查密码和密码确认是否相等.问题是验证器正在获取未定义的密码和确认的密码参数.我该如何做这项工作.该函数有效,如果我将条件更改为===而不是!==当字段相同时,它会正确抛出错误.有谁知道这里的错误是什么？

signup.component.html

<div class="col-md-7 col-md-offset-1 col-sm-7">
  <div class="block">
    <div class="well">
        <form (onSubmit)="onSubmit()" [formGroup]="signUpForm">
          <div class="form-group">
            <label for="username" class="control-label">Nombre de usuario:</label>
            <input type="text" class="form-control" formControlName="username"  title="Please enter your username" placeholder="username">
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('required') && signUpForm.get('username').touched">El nombre de usuario es obligatorio</p>
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('minlength') && signUpForm.get('username').touched">El nombre de usuario debe tener al menos 6 caracteres</p>
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('maxlength') && signUpForm.get('username').touched">El nombre de usuario debe tener menos de 15 caracteres</p>
          </div>
          <div class="form-group">
            <label for="email" class="control-label">E-mail:</label>
            <input class="form-control" formControlName="email" title="Please enter your email" …

使用时选择验证是否有任何首选方法

• myForm.controls['name'].valid
• myForm.get('name').valid

因为两者似乎只是在语法上不同,但实现了相同的目标.

<label>Name
  <input type="text" formControlName="name">
</label>
<div class="alert" *ngIf="!myForm.controls['name'].valid && myForm.controls['name'].touched">
  {{ titleAlert }}
</div>

与...一样

<div class="alert" *ngIf="!myForm.get('name').valid && myForm.get('name').touched">
  {{ titleAlert }}
</div>

从我在代码中检查,get有这个代码:

AbstractControl.prototype.get = function (path) { return _find(this, path, '.'); };

我刚刚开始使用Angular,所以我们将非常感谢专家意见.

我在父组件和子组件内的部分中有角反应形式。

在子组件内，我有一个复选框 - 当它被选中时 - 更多字段打开，我希望它们都是必需的。

我正在使用 setValidators 但出现错误

ParentFormComponent.html:3 ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改。以前的值：'ng-valid：true'。当前值：'ng-valid：false'。在 viewDebugError (core.js:7601) at expressionChangedAfterItHasBeenCheckedError (core.js:7589) at checkBindingNoChanges (core.js:7691) at checkNoChangesNodeInline (core.js:10560) at checkNoChangesNode (core.js:10541) at debugcore.NoChangesNode js:11144) at debugCheckRenderNodeFn (core.js:11098) at Object.eval [as updateRenderer] (ParentFormComponent.html:3) at Object.debugUpdateRenderer [as updateRenderer] (core.js:11087) at checkNoChangesView (core.js: 10442)

ParentFormComponent.html:3 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 2, nodeDef: Object, elDef: Object, elView: Object}

这是 ParentFormComponent.html:3 的行

 <form [formGroup]="parentForm" (ngSubmit)="submitForm()">

这是我的代码：

<label class="container">DB
    <input #db type="checkbox" name="db" (change)="checkValue(db.name, db.checked)"> 
    <span class="checkmark"></span>
</label>

<div *ngIf="db.checked" …

是活性形式,以去具有可以聆听到它包含并执行一些成分,它的方法形式的有效性状态变化的组件的方式吗？

使用templateRef就可以很容易地禁用模板中的提交按钮[disabled]="#myForm.invalid",但这不涉及组件的逻辑.

看模板表单'doc我没找到方法

我想formArray在用户在空创建的控件中添加值后更新a .

目前,当用户选择将我构建的新项目添加到formArray空值时.

buildItem(item?: any, key?: any): FormGroup {
  // Item will pass undefined for initial buildItem in onLoad and new items
  let itemName: string;
  let keyValue: string;
  if (item === undefined) { 
     itemName = ''; key = '' }  
  else { 
     itemName = item.name; keyValue = key 
  };

  /**
   * Builds a single item for form group array in the collectionForm.
   */
   return this.formBuilder.group({ 
                item: [itemName || '', Validators.required], 
                properties: { item, key: key } …

我有2个单选按钮,我正在使用反应式表单,我在组件中添加了表单控件.我面临的问题是name属性必须与formControlName相同.当我将name属性设置为相同时,我只能选择1个单选按钮 - 永远不能取消选择并选择另一个.只允许我选择同一个.

this.genderControl = new FormControl("", Validators.required);

然后添加到我的表格组

genderControl: this.genderControl,

我的HTML:

<div class="radio-inline">
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label"> Male</label>
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label">Female</label>
</div>

表格组

    this.personalInfo = new FormGroup({
  searchControl: this.searchControl,
  titleControl: this.titleControl,
  firstNameControl: this.firstNameControl,
  middleNameControl: this.middleNameControl,
  lastNameControl: this.lastNameControl,
  birthdayControl: this.birthdayControl,
  genderControl: this.genderControl,
  phoneControl: this.phoneControl,
  taxCanadaControl: this.taxCanadaControl,
  provinceControl: this.provinceControl,
  countryControl: this.countryControl,
  taxCountryControl: this.taxCountryControl,

  creditControl: this.creditControl
});

如何在有角度的readonly中进行formControl

我知道我可以用html这样做

<input type="text" formControlName="xyz" readonly />

如何从JS代码而不是html,即以模型驱动的方式

在我的Angular 4应用程序中,我有一个包含多个控件的表单.

在某些方面,我需要强制更新其有效性,所以我正在做:

this.form.get('control1').updateValueAndValidity();
this.form.get('control2').updateValueAndValidity();
this.form.get('control3').updateValueAndValidity();
// and so on....

然后:

this.form.updateValueAndValidity();

这很好用.

然而,我想知道是否有更好的方法来完成相同的事情,只需在父窗体上调用一个方法.

根据其文档,updateValueAndValidity()方法:

默认情况下,它还会更新其祖先的值和有效性.

但在我的情况下,我需要更新其后代的价值和有效性.所以我可以摆脱许多代码行.