Question

我有一个组件可以从Firestore获取文档集合并将它们显示在表中，而另一个组件则具有反应形式，可以向表中添加新条目。

我正在努力允许用户单击表上的按钮，然后用该行中的数据填充反应式表单组件。

这是我在componentA中的表格：

  inventoryForm = new FormGroup({
    name: new FormControl('', Validators.required),
    date: new FormControl('', Validators.required),
    amount: new FormControl('', Validators.required),
    comment: new FormControl('', Validators.required),
    carried: new FormControl('', Validators.required),
  });

如果我在componentA.html中包含一个按钮，该按钮在componentA中调用了这样的函数

  testPatch() {
    this.inventoryForm.patchValue({ name: 'Test123' });
     }

该表单将按预期更新（名称输入将填充Test123）。

但是，如果我在componentB.html中有一个按钮，该按钮在componentB中调用一个函数，然后在componentA中调用patchValue函数，则该修补程序不起作用。

我正在将componentA导入componentB，以便在传递文档ID时调用该函数。

是否缺少一些简单的东西，或者尝试一种更好的方法呢？

更新：我遇到了一个问题，即表单组返回null，我将添加一些其他代码。

我必须更新app.module.ts中的[providers]以添加FormGroupDirective，否则，尝试在组件的构造函数中初始化FormGroupDirective时，我将得到一个stackinjector错误。

app.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
import { InventoryService } from './inventory.service';
import { inventory_item } from './inventory_item';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {


  constructor(private inventoryService: InventoryService) {
  }

  inventoryForm = new FormGroup({
    name: new FormControl('', Validators.required),
    date: new FormControl('', Validators.required),
    amount: new FormControl('', Validators.required),
    comment: new FormControl('', Validators.required),
    carried: new FormControl('', Validators.required),
  });

  submitted = false;
  update = false;
  submittedItem: inventory_item = {
    name: '',
    date: '',
    amount: 0,
    comment: '',
    carried: '',
  }

  onSubmit() {
    this.submitted = true;
    const name = this.inventoryForm.get('name').value;
    const date = this.inventoryForm.get('date').value;
    const amount = this.inventoryForm.get('amount').value;
    const comment = this.inventoryForm.get('comment').value;
    const carried = this.inventoryForm.get('carried').value;
    this.inventoryService.addInventory({ name, date, amount, comment, carried })
    this.submittedItem = this.inventoryForm.value
  }
}

app.component.html

<app-inventory-list></app-inventory-list>
<div [hidden]="submitted">
  <form [formGroup]="inventoryForm" (ngSubmit)="onSubmit()">
    <label>
      Item Name:
      <input type="text" formControlName="name">
    </label>

    <label>
      Date Added:
      <input type="text" formControlName="date">
    </label>

    <label>
      Amount:
      <input type="number" formControlName="amount">
    </label>

    <label>
      Comment
      <input type="text" formControlName="comment">
    </label>

    <label>
      Carried by:
      <input type="text" formControlName="carried">
    </label>
    <br />
    <button type="submit" [disabled]="!inventoryForm.valid">Submit</button>
  </form>
</div>
<app-item-management></app-item-management>

<div [hidden]="!submitted">
  <h2>Item Added</h2>
  Name: {{submittedItem.name}}
  <br />
  Date: {{submittedItem.date}}
  <br />
  Amount: {{submittedItem.amount}}
  <br />
  Comment: {{submittedItem.comment}}
  <br />
  Carried by: {{submittedItem.carried}}
  <br />
  <button type="button"
          class="btn btn-default"
          (click)="inventoryForm.reset();
          submitted=false">
    New Loot!
  </button>
</div>

item-management.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { InventoryService } from '../inventory.service';
import { FormGroupDirective, FormGroup, ControlContainer, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-item-management',
  templateUrl: './item-management.component.html',
  styleUrls: ['./item-management.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ItemManagementComponent implements OnInit {


  constructor(private inventoryService: InventoryService, private parentForm: FormGroupDirective) {
  }

  editItem: any;

  ngOnInit() {
  }

  testPatch() {
    //this.parentForm.form.patchValue({ name: 'Test123' });
    console.log(this.parentForm.form)
  };

  updateInventory(updateId: string) {
  //this.parentForm.inventoryForm.patchValue({ name: 'Test123' });
    this.parentForm.form.patchValue({ name: 'Test123' });
    this.inventoryService.getUpdateInventoryItem(updateId)
      .then((doc) => {
        if (doc.exists) {
          console.log("Document data:", doc.data());
          this.editItem = doc.data();
          console.log("EditItem:", this.editItem)

        } else {
          console.log("No such document!");
        }
      }).catch(function (error) {
        console.log("Error getting document:", error);
      }); 
  };

}

item-management.component.html

<button type="button"
        class="btn btn-default"
        (click)="testPatch()">
  Patchtest
</button>

因此，当我单击“补丁测试”按钮时，控制台会为返回的对象打印“ null”，否则我将得到：

Cannot read property 'patchValue' of null
    at ItemManagementComponent.push..

Answer 1

更好的方法是创建顶层表单，然后将子组件包装在该组件中。

app.component.ts

<form [formGroup]="form">
    <input type="text" formControlName="name">
  <app-component-b></app-component-b>
</form>

内部子组件使用Viewproviders获取父表单实例以使用

修补值

componentb.component.ts

import { Component, OnInit } from '@angular/core';
import { ControlContainer, FormGroupDirective } from '@angular/forms';
@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ComponentBComponent implements OnInit {
  constructor(private parentForm: FormGroupDirective) { }
  ngOnInit() {
  }
  patchValue() {
    this.parentForm.form.patchValue({ name: 'fromChildComponentB' });
  }

}

示例：https://stackblitz.com/edit/angular-jteaiw

从另一个组件调用时，Angular PatchValue不起作用

1 个答案: