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()
    });

我对angular 6非常陌生，我习惯于使用与angular6完全相关的angularjs构建我的Web项目。任何帮助表示赞赏。

Answer 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
  }
 }

}

希望它能为您提供帮助，告诉我是否需要更多详细信息

Answer 2

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

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

嵌套表格角度6

2 个答案: