标签: angular-reactive-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}); …

I have a reactive form created in component and some formControls defined on it.

Now i need to disable one of the radio button from a radio button group based on some condition.

How do i do it while creating formControl?

PFB the code snippet:

createForm() {
this.heroForm = this.fb.group({
  confirmActionRadioGrp: this.fb.group({
            updateAction: new FormControl({ value: '' })
        })

  });
}

inside my template:

    <div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input …

我在 YouTube 上的 AngularConnect 2017 上看到了 Kara Erickson 的 Angular 表单演示。我特别感兴趣的部分是她描述嵌套反应形式的地方

我已经完成了 Kara 描述的所有事情，但null无论我尝试什么，我最终都会得到一个parentForm。

我在下面复制了我的代码的简化版本。问题是在child-form我得到的组件中null。

// 父组件

@Component({
  selector: 'parent-form',
  styleUrls: ['./parent-form.component.css'],
  template: `
    <form [formGroup]="createAlbumProfileForm" (ngSubmit)="onFormSubmitted($event)">
        <input type="text" placeholder="Something unique to parent form"/>
        <child-form></child-form>
    </form>
  `
})
export class ParentFormComponent implements OnInit {

  parentForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.parentForm = this.formBuilder.group({
      yoloField: this.formBuilder.control('')
    });
  }

// 子组件

@Component({
    selector: 'child-form',
    styleUrls: [ './child-form.component.scss' ],
    viewProviders:[ { provide: ControlContainer, …

我现在已经用反应式形式做了很多工作，并且非常喜欢它的概念。但是，我想知道是否有一种简单的方法来计算 formGroup 中的所有 formControl，或者我是否必须对其进行迭代？

我有一个复杂的嵌套 formGroup 结构，有 6 层或 7 层，这样可以节省我一点时间。

欢迎任何提示:)

我有一组来自 webservice: 的类别categories，以及一个包含选定类别的数组：selectedCategories

要显示所有复选框，我执行以下操作：

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div class="row">
    <div *ngFor="let category of categories">
      <input type="checkbox" class="custom-control-input" [id]="category.id" formControlName="category"
             [checked]="categoriesSelected?.includes(category.id)">
      <label class="custom-control-label" [for]="category.id">{{ category.name | translate }}</label>
    </div>
  </div>
</form>

这很好用。

然后我建立我的formGroup：

ngOnInit() {
    this.categoriesSelected = this.championships.map(championship => championship.category.id);
    this.formGroup = this.formBuilder.group({
      categories: this.formBuilder.array([{}])
    });
  }

现在，我需要的输出只是所选类别的 id。

我对链接 formBuilder 和 formGroup 有点迷茫。

如果我formControlName="categories"在我的模板中添加input标签，所有数据都会消失。

我该怎么做？

我有日期选择器，它应该通过复选框切换单击动态禁用和启用。来自库角材料 6 的所有组件。由于我对表单处理程序使用反应式方法，我不能简单地使用[disable]指令。我得到了进一步的错误：

It looks like you're using the disabled attribute with a reactive form directive. If you set disabled to true
when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
you. We recommend using this approach to avoid 'changed after checked' errors.

Example: 
form = new FormGroup({
  first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
  last: new FormControl('Drew', Validators.required)
});

我有想法直接在 TS 中替换FormContolinside FormGroup …

我在 FormGroup 中使用 FormControl 对象在 Angular 中创建反应式表单。当我将原始参数作为 HTML 输入选择控件的值传递时没有问题。但是，当我传递一个自定义类的对象时，FormControl中的值被减少为[object Object]。

我正在使用的系统包括：Angular CLI：7.1.4；节点：10.15.0；角度：7.1.4；rxjs 6.3.3; 打字稿 3.1.6；网络包 4.23.1；Linux rdz1 4.15.0-43-generic #46-Ubuntu SMP Thu Dec 6 14:45:28 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux

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

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

export class HeaderNotesComponent implements OnInit {
    ndcForm = new FormGroup({
        noteType: new FormControl(''),
        noteDate: new FormControl(''),
        noteFor: new FormControl(''),
        noteTo: new FormControl(''),
        noteDetail: new FormControl(''),
        noteDetailVal: new FormControl(''), …

我有一个包含许多字段的表单组：

    this.addressForm = this.formBuilder.group({
        line1: ['', Validators.required],
        line2: '',
        line3: '',
        line4: '',
        line5: '',
        line6: '',
        line7: '',
        line8: '',
    });

在我的 html 中，每个 formControl 都有一个表单字段，附近有一个按钮可以清除该表单控件。

                <mat-form-field>
                    <mat-label>line 1</mat-label>
                    <input matInput formControlName="line1" type="text">
                    <button type="button" (click)="clearLine('line1')">
                    </button>
                </mat-form-field>

如何编写一个通用方法来获取表单控件的名称并清除它？

我试试这个——

clearLine(line) {
    this.addressForm.patchValue({line: ''});
}

但这不起作用，因为它搜索了 formControl 名称“line”。

有没有办法在不执行许多“if”条件的情况下做到这一点？

FormGroup我的代码中有多个 dynamic 。

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

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

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

我正在尝试将 ControlValueAccessor 与 Angular Material datepicker 一起使用。出于某种原因，它不适用于 formControlName 和反应式表单。有人可以解决这个问题吗？正在为某些样式和属性构建包装器。值被发送到反应形式等

https://material.angular.io/components/datepicker/overview

打字稿：

import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ], host: {
    '(change)': 'onChange($event)',
    '(blur)': 'onTouch()'
  }
})

export class DatePickerComponent implements OnInit {
  @Input() Value: Date = new Date();
  @Input() PlaceHolder: string;
  @Input() Label:string;
  @Output() dateValueAction = new EventEmitter();

  onChange: any …