标签: formgroups

问题陈述 ：

在下面的stackblitz演示中，我能够FormGroup通过单击Add按钮并(blur)从一个控件触发事件以更新共享该控件的另一个控件的值，在网格的开头动态插入动态对象rowIndex。现在的问题是，如果我在多个新添加的对象上插入多个formGroups并触发(blur)事件，FormGroups它将更新其他控件的值以及具有不同的值rowIndex。

重现此问题的步骤：

• 打开下面的演示链接。
• 通过单击添加按钮添加多行（2行）。
• 在第二个新添加的行的名称字段中输入值，然后将焦点对准。
• 它会在两个新添加的行中更新年龄字段，而不是仅在第二行中更新。

Stackblitz演示： https ://stackblitz.com/edit/angular-oitz5j-4uezqr

要求：

跳出特定行的任何名称字段，同一行的“年龄”字段应显示一个随机数，而不会影响其他行。

到目前为止我尝试了什么？

• 试图使用Array unshift（）方法但出现错误

  类型“ FormArray”上不存在属性“ unshift”

• 尝试使用FormArray.insert（）方法。如果我们要FormGroup在特定索引处添加一个，它将可以工作。但是它无法FormGroups在FormArray动态顶部插入多个。

更新：如果没有Kendo Grid，上述问题可以正常工作。请检查以下演示。

演示： https : //stackblitz.com/edit/angular-oitz5j-2a31gs

github / stackoverflow中的相关问题：

https://github.com/angular/angular/issues/16322

Angular-表单数组推送特定索引

注意：如果我们要将控件添加到Grid的末尾，则它的工作原理很简单。请检查下面的演示，该演示在最后添加控件时效果很好。

演示： https : //stackblitz.com/edit/angular-oitz5j-aszrjq

我有这种反应性角形结构

myForm: FormGroup;
Personal: FormGroup;
FIRST_NAME: FormControl;
LAST_NAME: FormControl;
ngOnInit(): void {
    this.createFormControls();
    this.createForm();
}
createFormControls() {
    this.FIRST_NAME = new FormControl('', [Validators.required]);
    this.LAST_NAME = new FormControl('', [Validators.required]);
}
createForm(): void {
    this.myForm = this.fb.group({
        Personal: this.fb.group({
            FIRST_NAME: this.FIRST_NAME,
            LAST_NAME: this.LAST_NAME,
        })
    })
}

如果我做

this.FIRST_NAME.disable();

它禁用FormControl

如何禁用Personal FormGroup中的所有FormControls

我是 Angular 2 的新手，即使在通过其他堆栈溢出答案后也无法解决此问题。

我刚刚开始学习角反应形式，想尝试第一个例子，但被卡住了。请帮忙。

这是 HTML 表单。

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
        <div id="user-data">
          <div class="form-group">
            <label for="username">Username</label>
            <input
              type="text"
              id="username"
              formControlName="username"
              class="form-control">
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input
              type="email"
              id="email"
              formControlName="email"
              class="form-control">
          </div>
          <div class="radio" *ngFor="let gender of genders">
            <label>
              <input
                type="radio"
                class="form-control"
                formControlName="gender"
                [value]="gender">{{ gender }}
            </label>
          </div>
        </div>
        <button class="btn btn-primary" type="submit">Submit</button>
      </form>
    </div>
  </div>
</div>

这是 TS 文件。

import { Component, OnInit } from …

我提交表单组的价值是

{
  "name": "Sunil",
  "age": "23"
}

我想要的是

{
  "name": "Sunil",
  "age": 23
}

我的表单组在我的 .ts 文件中如下

myForm : FormGroup;
this.myForm = this._formbuilder.group({
  name: [''],
  age: [null]
});

我正在尝试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();

这是行不通的。

我想知道是否有任何方法可以检索反应表单的“已提交”状态。

使用模板驱动的表单，您可以通过“ngForm”访问 FormGroupDirective，如下所示

<form #form='ngForm' (ngOnSubmit)="handleSubmit()">
    <p *ngIf="form.invalid && form.submitted">Invalid</p>
    <button type="submit">Submit</button>
</form>

但是，当使用反应式表单时，如果不声明我自己的变量（在提交时更新/重置），我就无法实现相同的功能，这看起来很奇怪，因为模板驱动的变体中不需要这样做。

到目前为止我尝试过的：

• （在组件中） @ViewChild(FormGroupDirective) formGroupDirective / （在模板中） formGroupDirective.subscribed
  • 已检查错误后表达式已更改
• 形式=“ngForm”[formGroup]=“myForm”
  • 有多个指令将“exportAs”设置为“ngForm”

有什么建议么？

编辑：反应形式

<form [formGroup]="myForm" (submit)="doSomething()">
    <input formControlName="myInput">
    <p *ngIf="myForm.invalid">This is visible before submitting</p>
    <button type="submit">Submit</button>
</form>

我最近从 Angular12 迁移到 Angular14，Angular 在某些地方自动将 FormControl 转换为 UntypedFormControl。我观察到，在我使用 FormControl 的某些组件中，它仍然写为 FormControl。因此，我对哪些标准或在哪些条件下将 FormControl 角度转换为 UntypedFormControl 以及为什么在某些地方它仍然是 FormControl 感到有点困惑。我知道 UntypedFormControl 只是指向任何类型的 FormControl。

当我比较这两种情况时，我没有发现编码以及创建和使用 formGroup 和 formControl 的方式有任何差异。这让我更加困惑。

提前致谢！

我正在尝试嵌套多个 FormGroup，如果我不想将模板外包给自己的组件，它会非常有效。

这是一个有效的例子

模板

<form [formGroup]="baseForm">
  <div formGroupName="nestedForm1">
    <div formGroupName="nestedForm2">
      <input formControlName="nestedControl">
    </div>
  </div>
</form>

打字稿

this.baseForm = this.formBuilder.group({
  nestedForm1: this.formBuilder.group({
    nestedForm2: this.formBuilder.group({
      nestedControl: ["Default Value"]
    })
  })
});

如果我尝试将“nestedForm1”和“nestedForm2”外包到单独的组件中，则它从第二级开始不再起作用。

可以在以下链接中找到示例。您可以通过注释掉“app.component.html”中的相应代码部分来尝试这两种方法

https://stackblitz.com/edit/angular-gnpw24?file=src%2Fapp%2Fapp.component.html

我有一个使用angular 7的表单。我的FormGroup出现问题，并且与该FormGroup的FormControls关联的HTML输入在重置后不同步。我的输入已清除，但是我的表单控件具有预期的重置值。

我可以使用复位按钮来保持同步，该按钮不是“ reset”类型，而是绑定其onclick事件。另外，我可以通过吞下事件并进行表单重置来使语义正确的重置按钮正常工作。

但是，这对我来说在语义上是不正确的。更不用说，只要可以弄清这个同步问题，我想使用的代码的生产版本与语义正确的代码一起使用会更加方便。

出于简单性和行为隔离的原因，我改编了来自angular的文档https://angular.io/api/forms/FormControlName的代码

下面是我有问题的代码

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

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()" (reset)="resetToDefault()">
      <div *ngIf="first.invalid"> Name is too short.</div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
    </form>
  `,
})
export class SimpleFormGroupComponent {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: …

我有一个动态创建的表，它显示的数据如下：

<table>
  <tr *ngFor="let product of products">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" value=""></td>
  </tr>
</table>

我读到处理这个问题的适当方法是使用 FormsArray。但我也读到，使用 FormsArray 的正确方法是获取其控件数组：

<table>
  <tr *ngFor="let product of this.form.get('productCollection').controls; let i = index;"
     [formGroupName]="i">
    <td>{{product.name}}</td>
    <td>{{product.description}}</td>
    <td>{{product.value}}</td>
    <!-- BELOW IS WHERE A NEW VALUE WILL BE ENTERED -->
    <td><input type="text" formControlName="name"></td>
  </tr>
</table>

问题是我无权访问此处的描述值。我还没有找到一种方法将其作为元数据传递给控件，​​以便我可以显示它。

那么问题是，对于这样的事情，哪种方法是正确的？是FormArray吗？它是一个 FormGroup 中的一组 FormControl 吗？或者每个表单控件都需要单独存在吗？我愿意接受有关如何开展这项工作的建议。