标签: angular-reactive-forms

我正在推送带有一些值的 FormArray，并且在加载列表后我需要在某些字段中动态设置禁用属性。我的问题是：有没有办法仅使用 patchValue 设置值并设置禁用属性？

我尝试过类似 this.rowArray.controls[index].patchvalue({format: "NUMBER",disabled:true}) 但它似乎不起作用。

  this.rowList.forEach((el, index) => {
              this.rowArray.push(
                this.fb.group(
                  {
                    name: new FormControl(el.name, [
                      Validators.required,
                      Validators.maxLength(30),
                      Validators.pattern(this.BAN_SPECIAL_BUT_UNDERSCORE)
                    ]),
                    source: new FormControl(el.source, Validators.required)
.....

在那之后

    if (this.rowArray.controls[index].get("source").value === "CSV") {
                this.rowArray.controls[index].patchValue({
                  format: "NUMBER",
                  disabled: true
                });
              }

rowList 是我来自后端的矩阵。

我使用角度反应表单来创建带有文本字段的表单。

如果字段的数据已存储，我会预先填充字段。现在我可以允许用户导航到这些表单来编辑字段。

我想在编辑文本字段时调用一个函数，这可能会清除其下面的其他字段。

但我不希望该函数在以编程方式修改文本字段（在本例中为预填充）时清除要调用的其他字段。

如何使用 Angular React Forms 及其 API 来实现这一目标？表单控件上的标志类似于用户操作和编程预填充，pristine或者touched受用户操作和编程预填充的影响。

注意：我正在寻找反应形式方法的解决方案。模板驱动表单的解决方案已经在这里

我有一个具有反应式表单的库，我正在尝试使用 ng-template 和 ng-container （A 行）插入表单输入。

库组件

html

<form [formGroup]="mainForm">
  <input type="text" formControlName="inside">
  <ng-container [ngTemplateOutlet]="template"></ng-container> //line A
</form>

TS：

export class LibraryComponent implements OnInit {

@Input() template;
  mainForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.mainForm = this.formBuilder.group({
      inside: ['inside'],
      outside: ['outside'],
    });

  }

}

应用组件

<app-library [template]="outer"></app-library>


<ng-template #outer>
      <input type="text" formControlName="outside">
</ng-template>

这样做时我收到错误：

preview-d2335ca5bdb955611c1cb.js:1 ERROR Error: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
       directive and …

当在表单组上使用带有异步验证器的反应式表单时，如果通过patchValue在构造函数或 in 中使用来更改表单组的值ngOnInit- 即使异步验证器可观察完成，表单仍保持PENDING状态。

我在Stackblitz中创建了一个SSCCE

在示例中，您会看到一个包含两个字段的简单表单，其中指示表单状态和验证器状态。在代码中，ngOnInit我调用patchValue表单，导致表单进入PENDING状态，并调用异步验证器。

异步验证器没有做太多事情，它只是等待 1 秒，然后返回一个null错误对象，基本上表明表单是有效的。您可以在指示中看到验证已完成，但表单仍保持PENDING状态。

ngOnInit如果您在构造函数或对象构造之外的任何时间触发字段值的更改，那么VALID当验证程序完成时，表单会进入状态。如果您将值更改包装在 中，这也适用setTimeout。

难道我做错了什么？这是正常行为，还是 Angular 中的错误？

我想在单击 时动态添加行button。我为此使用反应形式。

这是我的 html 代码

<table>
    <thead>
        <tr class='tableHeader'>
            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="22" class="pr-4">Name</td>
                <td fxFlex="15" class="pr-4">Price</td>
                <td fxFlex="15" class="pr-4">Loan Term</td>
                <td fxFlex="15" class="pr-4">Quantity</td>
                <td fxFlex="15" class="pr-4">Deposit</td>
                <td fxFlex="15" class="pr-4">Total</td>
            </div>
        </tr>
    </thead>
    <tbody>
        <tr [formGroup]="loanProductForm">
            <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 0 auto">
                <td fxFlex="22">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Product </mat-label>
                        <mat-select formControlName="productId" required>
                            <mat-option *ngFor="let product of productList" [value]="product.productId">
                                {{product.name}}
                            </mat-option>
                        </mat-select>
                    </mat-form-field>
                </td>
                <td fxFlex="15">
                    <mat-form-field appearance="outline" fxFlex="100" class="pr-4">
                        <mat-label>Price </mat-label> …

我执行异步服务调用来获取元素列表。

 public elementList: Array<Element>;
   ... 
   this.service.getElementList().subscribe( list => {
       this.elementList = list;
       this.createFormGroup(list);
     }
   );
   ...

当我收到元素列表（我订阅了服务调用）时，我根据元素列表构建表单组。在模板中，我有一个 *ngIf 仅当列表大于零时才绘制。

*ngIf="elementList?.length>0"

由于elementList是异步获取的，所以这个ngIf不起作用。我读到可以将 ngIf 与 AsnycPipe 一起使用。所以在模板中我将有：

*ngIf="elementList$ && elementList$.length>0"

其中 elementList$ 是从服务调用返回的 Observable。

   public elementList$: Observable<Array<Element>>;   

   elementList$ =this.service.getElementList()

我想知道收到 elementList 后如何创建 FormGroup。首先，我需要创建 FormGroup，然后模板应该调用 *ngIf 来绘制元素。

我是角度单元测试的新手。测试场景：html中的表单视图值等于组件表单值。电子邮件值由共享值检索并在组件注册表单中使用。我可以使用反应式表单从组件中检索电子邮件值，但是当尝试通过本机元素访问时，它给出了空。下面是component.ts

ngOnit(public serviceEmail) {
    this.assignEmailAvailable();
    this.createRegistration();

    }
assignEmailAvailable() {
 if(service.email){
    this.email = serviceEmail.email;
  }
 }   
createRegistration() {
   this.registerForm = new FormGroup({
       email:new FormControl({value:this.email})
    })
}

在 component.spec.ts 中，我将调用此函数并检查两个值是否相同。组件规格

 beforeEach(() => {
    fixture = TestBed.createComponent(RegisterComponent);
    component = fixture.componentInstance;
    service = TestBed.get(serviceEmail);
  });
it('Registration Form Creation', fakeAsync(() => {
    service.email = "dsf@gmail.com";

    fixture.detectChanges();

    component.assignEmailAvailable();
    component.createRegisterForm();

    fixture.detectChanges();
    fixture.whenStable().then(() => {
    const email = fixture.debugElement.query(By.css('input[id="email"]')).nativeElement;
//The value is empty even after creating the form using the component function
    expect(email.value).toBe(component.emailValue);
    });
//THis returns me the …

您好，我使用反应式表单将对象数组绑定到 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

我想在表单上添加反应式表单控件，并触发错误：

多个自定义值访问器与具有未指定名称属性的表单控件相匹配

一切都是单独工作的，反应式表单验证，掩码或 matDatepicker，任何组合也可以工作，但三者一起提示错误。

这是我的代码：

在组件.ts中

formGroup = new FormGroup({
    date: new FormControl()
  });

在组件.html中

    <mat-form-field>
      <input type="text" matInput [matDatepicker]="date_picker" mask="d0/M0/0000" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="date_picker"></mat-datepicker-toggle>
      <mat-datepicker #date_picker></mat-datepicker>
    </mat-form-field>

我在用着：

"@angular/cli": "8.3.19"
"ngx-mask": "8.1.7"
"@angular/material": "8.2.3"