标签: angular-reactive-forms

我正在构建一个Angular 4应用程序,它需要在几个组件的表单字段上进行BriteVerify电子邮件验证.我正在尝试将此验证实现为自定义异步验证器,我可以将其与反应式表单一起使用.目前,我可以获得API响应,但控制状态仍处于暂挂状态.我没有错误,所以我有点困惑.请告诉我我做错了什么.这是我的代码.

零件

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

import { EmailValidationService } from '../services/email-validation.service';

import { CustomValidators } from '../utilities/custom-validators/custom-validators';

@Component({
    templateUrl: './email-form.component.html',
    styleUrls: ['./email-form.component.sass']
})

export class EmailFormComponent implements OnInit {

    public emailForm: FormGroup;
    public formSubmitted: Boolean;
    public emailSent: Boolean;
    
    constructor(
        private router: Router,
        private builder: FormBuilder,
        private service: EmailValidationService
    ) { }

    ngOnInit() {

        this.formSubmitted = false;
        this.emailForm = this.builder.group({
            email: …

有没有办法将反应式表单组重置为其初始值而不是使用.reset()方法将其清空？

我有以下stackblitz，其中默认选择的值为Parent，如果用户将其更改为姐妹，并希望将表单设置为初始值，请单击重置按钮来执行此操作。

目前，我尝试过：

this.formGroup.reset();
//Or
this.formGroup.markAsPristine;
//Or
this.formGroup.markAsTouched

在.reset()完全地重置表单。

PS 有些人可能会说用户可以重新选择默认值而不是点击重置按钮。但就我而言，我有一个巨大的用户表单，他需要在其中更新他的信息，如果他在某些值中弄错了，他可能需要重置为初始值。

我未能让 Angular 2 反应式表单工作，其中FormGroup 嵌套在FormArray 中。有人可以告诉我我的设置有什么问题吗？

为简洁起见，省略了代码中不相关的部分。

以下是我的组件

orderForm: FormGroup = this.fb.group({
    id: [''],
    store: ['', Validators.required],

    //The part related to the error
    order_lines: this.fb.array([
        this.fb.group({
           id: [''],
           order_id: [],
           product_id: [],
           description: ['', Validators.required],
           unit_price: ['', Validators.required],
           discount: [0],
           units: [1, Validators.required],
           line_total: ['', Validators.required]
        })
    ])
});

constructor(private fb: FormBuilder) {  }

//Order instance is passed from elsewhere in the code
select(order: Order): void {
    this.orderForm.reset(order)
}

Order传递给select方法的实例是这样的：

  {
        "id": 20,
        "store": "Some Store", …

嗨，大家好我是新手。实际上，我正在尝试从服务中订阅数据，然后将该数据传递给我的表单控件（例如，它就像一个编辑表单）。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { QuestionService } from '../shared/question.service';

@Component({
  selector: 'app-update-que',
  templateUrl: './update-que.component.html',
  styleUrls: ['./update-que.component.scss']
})
export class UpdateQueComponent implements OnInit {

  questionsTypes = ['Text Type', 'Multiple choice', 'Single Select'];
  selectedQuestionType: string = "";
  question: any = {};

  constructor(private route: ActivatedRoute, private router: Router,
    private qService: QuestionService, private fb: FormBuilder) { 

  }

  ngOnInit() {
      this.getQuebyid();
  }

  getQuebyid(){ …

我有一个带有 2 个输入字段的重置密码表单：

1. 新密码
2. 新密码（确认）

我必须创建一个验证，其中“新密码（确认）需要与“新密码”匹配，并且我做到了。当您在“新密码（确认）字段中输入错误的密码时，它会给出错误并且不会让您提交表单，直到它与“新密码”字段中的密码匹配。但是，如果我返回并更改“新密码”字段，“新密码（确认）字段显示它仍然匹配，即使它们不再匹配......所以我的问题是：我该如何解决这个问题？

任何建议表示赞赏

.ts 文件

import { AbstractControl, FormBuilder, FormControl, Validators } from '@angular/forms';
import { AppConfig } from 'src/app/_common/configs/app.config';
import { Component } from '@angular/core';

@Component({
  selector: 'app-reset-password',
  templateUrl: './reset-password.component.html',
  styleUrls: ['./reset-password.component.scss'],
})
export class ResetPasswordComponent {
  passwordsMatching = false;
  isConfirmPasswordDirty = false;
  confirmPasswordClass = 'form-control';
  appConfig = AppConfig;
  newPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern('^((?!.*[s])(?=.*[A-Z])(?=.*d).{8,99})'),
  ]);
  confirmPassword = new FormControl(null, [
    (c: AbstractControl) => Validators.required(c),
    Validators.pattern('^((?!.*[s])(?=.*[A-Z])(?=.*d).{8,99})'),
  ]);

  resetPasswordForm = this.formBuilder.group({
    newPassword: …

我有一个模板表单,模板标记中包含以下代码

  <form [formGroup]="modalFG">
  ...
  <ion-item *ngIf="isChangeStatus()">
      <ion-select formControlName="jobStatus"
                  (ionChange)="jobStatusChangeHandler($event)">
        <ion-option value=4>Success</ion-option> 
        <ion-option value=5>Failure</ion-option>
        <ion-option value=6>Terminated</ion-option> 
        <ion-option value=8>Inactive</ion-option> 
      </ion-select>
  </ion-item>
  </form>

在Typescript中我已经指定了一个值,但是我无法通过这个错误.

错误:必须为名称为'jobStatus'的表单控件提供值.

有人能告诉我我做错了什么吗？

...
private modalFG:FormGroup;
private jobStatus:number;
constructor(
  private navParams:NavParams,
  private view:ViewController,
  private fb: FormBuilder,
  ...
) {
    this.changeStatus = false;
    this.modalFG = fb.group({
      comment: ['', Validators.required],
      jobStatus: this.jobStatus
    });
}
private ionViewWillLoad():void {
    const data = this.navParams.get('data');
    this.modalFG.setValue({'jobStatus': this.jobStatus});
}

private jobStatusChangeHandler(ev:any) {
    console.log(ev);
}

private isChangeStatus():boolean {
    return this.changeStatus;
}

我也有提交的按钮处理程序:

this.exitData.jobStatus = this.modalFG.get('jobStatus').value;
this.view.dismiss(this.exitData);

这是完整的错误消息:

Error: …

需要知道，当您在一个表单中有多个控件并且您想知道用户更改为哪个控件以便您可以执行某些操作时。

<input formControlName="item_name" #itemName (input)="inputChanged(itemName)">

为什么我需要获取 formControlName？

正如您在图像中看到的，某些字段已编辑但未确认，这就是为什么用户会看到用于验证或取消对该特定字段的操作的选项的原因。这就是为什么我需要获取formControlName输入更改的字段，以便我可以只显示该字段的选项。

我已经搜索了它的解决方案，但找不到stack-overflow这就是为什么我决定发布这个问题的答案

我有一个非常复杂且庞大的数据，我必须在组件中围绕它构建一个Reactive表单。

我已经开发了表格。但是，当我在其中一个input字段中键入内容以编辑填充的数据时，它在更新该字段的值时响应非常慢。

我尝试使用updateOn:'blur'，'submit'但没有任何运气。

我的问题是，处理大数据表格的最佳实践是什么？

更新：这是我的StackBlitz。

注意：我已经为我的实际实现创建了一个非常小的版本，并且在Reactive Form中存在性能问题。

问题陈述 ：

在下面的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

我有以下表格：

const enum Fields {
  FirstName = 'firstName',
  LastName = 'lastName'
}

interface FormType {
  [Fields.FirstName]: FormControl<string | null>;
  [Fields.LastName]: FormControl<string | null>;
}

public form!: FormGroup<FormType>;

this.form = new FormGroup({
  [Fields.FirstName]: new FormControl(null, { validators: Validators.required }),
  [Fields.LastName]: new FormControl(null, { validators: Validators.required }),
});

使用 theenum是我为了避免输入错误而养成的习惯。

当我这样做时this.form.getRawValue().firstName， 的类型firstName被正确定义为string | null。但是，我更喜欢使用FormBuilder来构建我的表单，但我找不到使用 来翻译上面表单的方法FormBuilder。我试过这个：

this.form = this._fb.group<FormType>({
  [Fields.FirstName]: ['', Validators.required],
  [Fields.LastName]: ['', Validators.required],
});

我当然可以使用一个FormGroup没有任何类型的简单的，但它会达不到目的：p

然而，这甚至不能作为 的推断类型 …