嵌套形式 | angular 6

Question

我有以下 HTML 表格：

<form fxLayout="column" [formGroup]="setPaymentForm" autocomplete="off">
<div class="input-row" fxLayout="row">
    <form class="example-form" [formGroup]="setPaymentClientName">
        <mat-form-field class="example-full-width">
        <input matInput placeholder="Client Name" formControlName="clientName" (ngModelChange) ="getSearchedClients()" aria-label="Clients" [matAutocomplete]="auto" [formControl]="paymt_client_ctrl">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let client of filteredClients | async" [value]="client.name">
            <span>{{client.name}}</span> |
            <small> phone: {{client.phone}}</small>
            <small> | address: {{client.address}}</small>
            </mat-option>
        </mat-autocomplete>
        </mat-form-field>
        <br>
    </form>
</div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
    <mat-form-field class="inputField" fxFlex>
    <input matInput formControlName="payment_amount" placeholder="Payment Amount" type="text">
    </mat-form-field>
</div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
    <mat-checkbox[checked]='this.isCash' formControlName="isCash"> Cash</mat-checkbox>
</div>
<div class="modal-footer">
              <button mat-raised-button name="addButton" (click)="submitPayment()" color="primary">Set Payment</button>
            </div>
</form>

有两种形式，外部形式是 setPaymentForm，内部形式我称之为 setPaymentClientName。

我想在提交的时候获取两个表单的数据，所以做了如下功能：

submitPayment(){
    this.setPaymentForm = this.fb.group({
      clientName: [this.clientName, Validators.required],
      payment_amount: [this.payment_amount],
      isCash: [this.isCash]
    });

但是我在打开表单后收到以下错误消息：

PaymentsComponent.html:23 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

       Example:


    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

我是 angular6 的新手，我习惯使用 angularjs 构建我的 web 项目，它比 angular6 完全不同。任何帮助表示赞赏。

Answer 1

您可以在 Angular 中实现嵌套表单。看看下面的link： https://medium.com/spektrakel-blog/angular2-building-nested-reactive-forms-7978ecd145e4

您需要使用 formGroups 来区分并添加多个按钮来获取您的自动完成数据。

Answer 2

这就是我认为你想要做的：你形成一个包含 3 个字段的表单。

第一个是允许您搜索的自动完成客户
下一个是这个客户的付款金额
然后你需要知道他是否得到现金支付

关于这个错误，她很清楚，你在 HTML 中添加了一个 formGroup 似乎在加载页面时没有引用实例 formGroup。简单来说，FormGroup 只是一个描述或您的表单。

此外，就像人们说的那样，我认为您不需要有 2 个表格，一个就足够了

这是您的html（示例稍微简化），带有一个表单和提交类型按钮。

<form fxLayout="column" [formGroup]="clientPayementForm" (ngSubmit)="submitForm()" autocomplete="off">

  <!-- autocomplete client -->
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Client Name" formControlName="clientName" aria-label="Clients" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let client of filteredClients | async" [value]="client.name">
        <span>{{client.name}}</span> |
        <small> phone: {{client.phone}}</small>
        <small> | address: {{client.address}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <!-- payement amount -->
  <mat-form-field class="inputField" fxFlex>
    <input matInput formControlName="payment_amount" placeholder="Payment Amount" type="text">
  </mat-form-field>

  <!-- checkbox -->
  <mat-checkbox [checked]='this.isCash' formControlName="isCash"> Cash </mat-checkbox>

  <div class="modal-footer">
    <button mat-raised-button name="addButton" type="submit" color="primary">Set Payment</button>
  </div>
</form>

在 TS 中：

export class MyComponent {

 clientAutocompleteControl = new FormControl();
 clientPayementForm : FormGroup;

 constructor(private fb: FormBuilder){
 }

 ngOnInit(){
   // here you initialize the form used by the formGroup
   this.clientPayementForm = this.fb.group({
      clientName: [this.clientName, Validators.required],
      payment_amount: [this.payment_amount],
      isCash: [this.isCash]
    });

    // manage the autocomplete value to make the auto complete component work
    // you should call you getSearchedClients perhaps with a mergeMap pipe from rxjs
    this.clientPayementForm.controls.clientName.statusChanges.subscribe(pipe(debounceTime(500), ...));
 }

 submitForm(){
  if(this.clientPayementForm.valid){
    // your form is valid :)  you can now call you API to save data
  }
 }

}

希望它能帮到你，如果你需要更多细节，请告诉我

嵌套形式 | angular 6

Nested Form | angular 6

nested-forms

formbuilder

angular

formgroups

angular6