标签: angular-reactive-forms

您好，我使用反应式表单将对象数组绑定到 formArray，但在这里，如果我选择一个部分中的任何一项，然后单击“向右移动/向左移动”，则整个对象已从一个部分移动到另一部分。但该功能工作正常，但我无法检测到 form.valuechanges() 中从一个部分到其他部分所做的更改。任何人都可以帮助我检测更改，以防项目已从一个部分移动到另一部分，在这里我想要更改检测，但功能必须按原样工作，我的意思是整个对象从一个部分移动到另一部分。

提前致谢。

我这里有工作 demo2，我希望我之前发布的 demo1 能够像这个 demo2 一样工作，并且 formarray 工作。 演示2

演示： 演示 1

TS：

 private settingsGroupInfoForm() {
    if (!this.agentDetailsList) {
      // Add
     this.agentGroupViewInfoForm = this.FB.group({
          agentGroupView: this.FB.array(
            this.agentInView.map(x=>(x))
          ),
        })
    } else {
      // Edit
      if (this.agentDetailsList) {

       this.agentGroupViewInfoForm = this.FB.group({
          agentGroupView: this.FB.array(this.agentInView.map(x=>(x))),

      })
      }
      this.agentGroupViewInfoForm.valueChanges.subscribe(data => {
          this.formEdit = true;
          console.log('agentGroupViewInfoForm', this.formEdit)
        })
      }
    }

HTML：

 <div class="card-body overflow-auto py-0" *ngIf="agentGroupViewInfoForm"
            [formGroup]="agentGroupViewInfoForm">
                <ul class="list-group list-group-flush" *ngFor="let child of agentInView"   name="agentInGroup" formArrayName="agentGroupView">
                  <li class="list-group-item {{isInActiveItems(child) ? …

我在 Angular 9 应用程序中使用带有自定义表单控件的响应式表单。

我用自定义表单控件包装了我的ng-select控件。

我在验证方面遇到问题。我将 formControl 设置为必需。文档说cssng-invalid类应该自动设置为 ng-select。但实际上使用自定义表单控件它无法正常工作。css 类未设置，但包装器类已设置。我做错了什么还是这是图书馆的问题？

检查stackblitz： https://stackblitz.com/edit/angular-rmvttg-ex63ka ?file=src/forms-single-select-example.component.html&fbclid=IwAR2robtd_15khTVhmW59lLhn21HOHl_yYTrCWKaPRmfUt1QVvUn3n8V4Vjo

我尝试使用反应式表单，我只需要为每个填充的项目创建键但是因为创建的第一个时刻，如果字段未满，它会发送 null 而我想要一个不为空的字段我发送的所有代码是：

form: FormGroup;
 constructor() {
    this.form = new FormGroup({
      basePrice: new FormControl(null, [customeValidator.numberOnly()]),
      discountValue: new FormControl(null, [customeValidator.numberOnly()]),
      roomViewCount: new FormControl(null, [customeValidator.numberOnly()])
    });
  }


onCalcute() {
    console.log(this.form.value);

    if (this.form.valid) {
      this.roomData = {
        basePrice: this.form.value.basePrice,
        discountValue: this.form.value.discountValue,
        roomViewCount: this.form.value.roomViewCount
      };
      this.clicked = true;
    }
  }

如果其中只有一个已满 console.log 返回

{
        basePrice: 20,
        discountValue: null,
        roomViewCount: null
}

但是我需要：

{
        basePrice: 20
}

我是 angular8，我在表单组内有一个表单数组，但我想检测某个输入的新更改。

ngOnInit(): void {
    this.makeForm = this.fb.group({

     
      
      year:['', Validators.required],
      amount:['', Validators.required],
      desc:['', Validators.required],
      details: new FormArray([
        this.det(), 
      ])
    })


det(){
      return new FormGroup({
        requestfor     : new FormControl(''),
        remarks        : new FormControl('')
    })}

我必须检查 formarray 值中每个值发生变化的数据。但如果我使用，我会收到错误

this.makeForm.value.details.get('requestfor').valueChanges

错误是

ERROR TypeError: Cannot read property 'valueChanges' of undefined

如何获取表单数组值内的值

如何获取该值......

如何对（Jest此处）自定义验证器进行单元测试，其中有FormGroup？我见过这个问题，但它是关于FormControl.

要测试的功能。

import { FormGroup } from '@angular/forms';

/**
 * @description Validate if passwords are different.
 * @function validatePasswords
 * @param {string} passwordControlName - reference to formControlPassword of the contactForm.
 * @param {string} confirmPasswordControlName - reference to formControlConfirmPassword of the contactForm.
 * @returns {(formGroup: FormGroup) => void}
 */
export function validatePasswords(
  passwordControlName: string,
  confirmPasswordControlName: string
): (formGroup: FormGroup) => void {
  return (formGroup: FormGroup) => {
    // Get values of desired controls …

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

@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {

  registerationForm: FormGroup = new FormGroup({});
  constructor() { }

  ngOnInit() {
    this.registerationForm = new FormGroup({
      userName : new FormControl(null, Validators.required),
      email : new FormControl(null, [Validators.required, Validators.email]),
      password : new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword : new FormControl(null, [Validators.required]),
      mobile : new FormControl(null, [Validators.required, Validators.minLength(10)])
    }, this.passwordMatchingValidatior);
  }
  passwordMatchingValidatior(fg: FormGroup): Validators{
    return this.registerationForm.get('password').value === …

我正在使用角度和故事书。我的模型中有 FormGroup 和 FormArray，但它们不适用于故事书。

a.stories.ts ->

import { CommonModule } from '@angular/common';
import { FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { Meta, moduleMetadata, Story } from '@storybook/angular';

export default {
    title: 'Example/A',
    component: AComponent,
    decorators: [
        moduleMetadata({
            imports: [
                CommonModule,
                ReactiveFormsModule,
            ],
            providers: [],
        }),
    ],
} as Meta;

const Template: Story<AComponent> = (args: AComponent) => ({
    props: args,
});

export const Costs = Template.bind({});
Costs.args = {
    model: {
        questions: [
            {
                ...,
                "question": "lorem ipsum", …

我正在 Angular 11 中构建一个反应式表单。它分为多个 div，项目所有者希望在每个 div 中进行一些重复输入，以便用户可以编辑某个字段 A 和所有 div 的输入' 字段 A 的输入将显示更新后的值。

我喜欢科里兰的方法：

<input [formControl]="myCtrl" [value]="myCtrl.value" />
<input [formControl]="myCtrl" [value]="myCtrl.value" />
<input [formControl]="myCtrl" [value]="myCtrl.value" />

formControlName...但我想用而不是实现这一点，formControl以便我可以利用formGroups （而不是让每个表单控件成为我的组件对象的成员）。然而，缺乏对实际的引用myCtrl会破坏 处的绑定[value]。

有没有一个好的策略让我仅按名称指定表单控件并使所有这些输入都使用单个控件？或者，当有很多不同的集合需要同步时，是否有一种不同的好方法来同步 Angular 反应形式的输入？

我已经构建了一个名为 的控件TextBox，为了简单起见，我将只在此发布该控件的相关部分。

    @Component({
      selector: 'app-textbox',
      template:
      `
        <input [(ngModel)]="value" [disabled]="disabled" />
      `,
      styleUrls: ['./textbox.component.css']
    })
    export class TextboxComponent implements OnInit, ControlValueAccessor {
    
      constructor() { }
      writeValue(obj: any): void {
        this._value = obj;
      }
      registerOnChange(fn: any): void {
        this.onChange = fn;
      }
      registerOnTouched(fn: any): void {
        this.onTouch = fn;
      }
      setDisabledState?(isDisabled: boolean): void {
        this.disabled = isDisabled;
      }
    
      disabled = false;
    
      onChange:()=>{}
      onTouch:()=>{};
    
      private _value:string;
      public get value():string {
        return this._value
      } 
      public set value(value:string){
        this._value = value;
      } …

我在 Angular 版本 10 中使用反应式表单。但出现以下错误。

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.\n\n       Example:\n\n       \n    <div [formGroup]="myGroup">\n      <input formControlName="firstName">\n    </div>\n\n    In your class:\n\n    this.myGroup = new FormGroup({\n       firstName: new FormControl()\n    });\n    at Function.missingFormException (forms.js:1700:1)\n    at FormGroupDirective._checkFormPresent (forms.js:5632:1)\n    at FormGroupDirective.ngOnChanges (forms.js:5454:1)\n    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.js:2373:1)\n    at callHook (core.js:3285:1)\n    at callHooks (core.js:3251:1)\n    at executeInitAndCheckHooks (core.js:3203:1)\n    at selectIndexInternal (core.js:6324:1)\n    at \xc9\xb5\xc9\xb5advance (core.js:6306:1)\n    at PatientInformationComponent_Template (template.html:39:34)\n

我的示例 HTML 代码如下。

<div [formGroup]="MyForm">\n      <input formControlName="firstName">\n      <input formControlName="lastName">\n</div>\n

我的TS代码：

export …