1

我有以下 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()
    });

我对 angular 6 很陌生，我习惯于使用 angularjs 构建我的 web 项目，它比 angular6 完全不同。任何帮助表示赞赏。

4

2 回答 2

1

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

  • 第一个是允许您搜索客户的自动完成功能
  • 下一个是该客户的付款金额
  • 那么你需要知道他是否收到现金

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

此外，就像人们说的那样，我认为您不需要两种形式，一种就足够了

这是带有一个表单和提交类型按钮的 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
  }
 }

}

希望它可以提供帮助，如果您需要更多详细信息，请告诉我

于 2018-09-20T22:06:51.490 回答
0

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

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

于 2018-09-20T21:41:19.350 回答