Html 使用 Angular 材料在输入字段中获取输入

Question

我正在使用 Angular Material 组件库开发 Angular 项目。

我正在制作一个具有多个字段的表单，并且一切正常，除了它看起来有点有趣：

这里应该发生的是，用户选择他想要的多个文件，并生成一定数量的字段（在本例中为 2），用户填写输入字段并提交。

由于某种原因，我的输入字段内有一个输入字段，我无法弄清楚我缺少什么。我能够正确地从输入字段获取数据，表单工作正常，我只是不想在字段中包含字段。

HTML：

        <div class="config-wrapper">

            <mat-form-field id="config-field">

                <div>

                    <mat-label>Number of configuration files</mat-label>

                </div>

                <mat-select formControlName="numberOfConfigPaths" (selectionChange)="onConfigChange($event)"

                    [ngClass]="{ 'is-invalid': isSubmitted && formControls.numberOfConfigPaths.errors }">

                    <option value=""></option>

                    <mat-option *ngFor="let number of configNumber" [value]="number.value">{{number.value}}</mat-option>

                </mat-select>

            </mat-form-field>

            <button type="button" mat-icon-button aria-label="Configuration path folder open" id="config-path-button"

                (click)="openConfigDialog();">

                <mat-icon>folder_open</mat-icon>

            </button>

        </div>

        <div *ngIf="isSubmitted && formControls.numberOfConfigPaths.errors" class="invalid-feedback">

            <div *ngIf="formControls.numberOfConfigPaths.errors.required">

                Number of configuration files is required

            </div>

        </div>

在调试时，我尝试隔离该字段并使其仅显示 1 个字段（只是将元素复制到其他位置）并且工作正常，但我需要使其显示多个字段。

我一直在寻找解决方案。如果您需要任何其他信息，我会回复。

Answer 1

您的代码中的问题是mat-form-field每个表单控件都有两次，这就是它显示的原因。我已经把里面的东西去掉了mat-form-field，现在看起来还不错。

Answer 2

有一个叫做 formArray 的东西它可以解决你的问题。