angular-reactive-forms - FormControl 和 FormControlName 在同一个输入 Angular11

Question

我已经处理了我的代码，因为我正在尝试使用 formControl 进行自动完成，但是当您选择某些内容到我的 formgroup 数组时，我需要将这些数据带入。我想知道是否存在一种方法可以让 formControl 过滤我的自动完成和 formControlName 来获取数据，谢谢，这是我的代码：

        newArticle: FormControl = this.fb.control('', Validators.required);
      registerForm: FormGroup = this.fb.group({
        itemRows: this.fb.array([
          this.fb.group({
            article: [, Validators.required],
            quantity: [, Validators.required],
            price: [, Validators.required],
            discount: [, Validators.required],
            subtotal: [0, Validators.required],
            warehouse: ['', Validators.required],
          })
        ]),
        tax: [, Validators.required],
        date: [this.dateToday, Validators.required]
      });
  get rowsArr() {
    return this.registerForm.get('itemRows') as FormArray;
  }

ngOnInit(): void {
    this.filteredOptionsArticle = this.newArticle.valueChanges
      .pipe(
        startWith(''),
        map(value => typeof value === 'string' ? value : value.descripcion),
        map(descripcion => descripcion ? this._filterA(descripcion) : this.ArticleList.slice())
      );
    this.article.listArticles().subscribe((result) => {
      this.ArticleList = result;
    })
}

  addNewRow() {
    //if( this.registerForm.invalid ) { return; }
    const newRow = this.fb.group({
      article: [, Validators.required],
      quantity: [, Validators.required],
      price: [, Validators.required],
      discount: [, Validators.required],
      subtotal: [0, Validators.required],
      warehouse: ["", Validators.required]
    })
    this.rowsArr.push(newRow);
  }
  deleteRow(rowIndex: number) {
    const control = <FormArray>this.registerForm.controls['itemRows'];
    if (control != null) {
      this.totalRow = control.value.length;
    }
    if (this.totalRow > 1) {
      control.removeAt(rowIndex);
    } else {
      alert('you need to write all')
    }
  }

private _filterA(name: string): IArticles[] { const filterValue = name.toLowerCase(); return this.ArticleList.filter(option => option.descripcion.toLowerCase().indexOf(filterValue) === 0); }

还有我的 HTML：

<h2 mat-dialog-tittle>New Quotation</h2>
<mat-dialog-content>
    <form [formGroup]="registerForm">
        <div class="row" style="justify-content: center;">
            <div class="col-lg-3">
                <mat-form-field>
                    <mat-label>Type customer</mat-label>
                    <ng-container formArrayName="itemRows">
                        <input type="text" matInput [matAutocomplete]="autoCustomer" [formControl]="newCustomer">
                    </ng-container>
                    <mat-autocomplete #autoCustomer="matAutocomplete" [displayWith]="displayFnCustomer">
                        <mat-option *ngFor="let customer of filteredOptionsCustomer | async" [value]="customer">
                            {{customer.doc_nit}} - {{customer.nombre}}
                        </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
            </div>
            <div class="col-lg-3">
                <mat-form-field>
                    <mat-label>Tax (%)</mat-label>
                    <input type="number" placeholder="0" matInput formControlName="tax" (keyup)="calculation()">
                </mat-form-field>
            </div>
            <div class="col-lg-3">
                <mat-form-field appearance="fill">
                    <mat-label>Choose a date</mat-label>
                    <input matInput [matDatepicker]="picker" formControlName="date">
                    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
            </div>
        </div>
        <table>
            <tr>
                <th>
                    <mat-label>Warehouse</mat-label>
                </th>
                <th>
                    <mat-label>Articles</mat-label>
                </th>
                <th>
                    <mat-label>Quantities</mat-label>
                </th>
                <th>
                    <mat-label>Prices</mat-label>
                </th>
                <th>
                    <mat-label>Discounts</mat-label>
                </th>
                <th>
                    <mat-label>Subtotals</mat-label>
                </th>
                <th colspan="2">
                    <mat-label>Options</mat-label>
                </th>
            </tr>
            <ng-container formArrayName="itemRows" class="row">
                <ng-container *ngFor="let itemrow of rowsArr.controls; let i=index" [formGroupName]="i">
                    <tr>
                        <td style="width: 160px;">
                            <select class="form-control" formControlName="warehouse">
                                <option selected value="">
                                    Select warehouse
                                </option>
                                <option *ngFor="let warehouse of WarehouseList" [value]="warehouse.id_almacen">
                                    {{warehouse.nombre}}
                                </option>
                            </select>
                        </td>
                        <td style="text-align: left; width: 300px;">
                            <input type="text" class="form-control" name="" placeholder="Type Article"
                                [matAutocomplete]="autoArticle" [formControl]="newArticle">   <----- Here I woud like to do it
                            <mat-autocomplete #autoArticle="matAutocomplete" [displayWith]="displayFnArticle">
                                <mat-option *ngFor="let articles of filteredOptionsArticle | async" [value]="articles">
                                    {{articles.codigo}} - {{articles.descripcion}}
                                </mat-option>
                            </mat-autocomplete>
                        </td>
                        <td>
                            <input class="form-control" placeholder="0" type="text" (keyup)="calculation()"
                                formControlName="price">
                        </td>
                        <td>
                            <input class="form-control" placeholder="0" type="text" (keyup)="calculation()"
                                formControlName="discount" (keyup.enter)="addNewRow()">
                        </td>
                        <td>
                            <input class="form-control" placeholder="0" type="text" (keyup)="calculation()"
                                formControlName="quantity">
                        </td>
                        <td style="width:100px">
                            <div style="margin: 5px; text-align: center;">
                                {{itemrow.value.subtotal}}
                            </div>
                        </td>
                        <td>
                            <a (click)="deleteRow(i)">
                                <mat-icon>cancel</mat-icon>
                            </a>
                        </td>
                        <td>
                            <button mat-raised-button (click)="addNewRow">
                                +
                            </button><a (click)="addNewRow()">
                                <mat-icon>add_circle</mat-icon>
                            </a>
                        </td>
                    </tr>
                    <input type="text" formControlName="article" value="newArticle.value">

                </ng-container>
            </ng-container>
        </table><br>
        <button mat-raised-button (click)="register()">Register</button>
        <mat-card-actions>
            <button mat-raised-button mat-dialog-close>Close</button>
        </mat-card-actions>
    </form>
    <pre>
        {{registerForm.valid}}

        {{registerForm.value | json}}
        {{newArticle.value | json}}
        {{newArticle.value.id_articulo}}
        {{newCustomer.value | json}

}

</pre>

标签： angular-reactive-formsform-controlangular11mat-autocomplete