通过以角度访问下拉表单控件来更改下拉选项答案

【问题标题】：Change dropdown options by accessing dropdown form control in angular通过以角度访问下拉表单控件来更改下拉选项
【发布时间】：2021-01-21 15:14:32
【问题描述】：

有没有办法根据表单控件名称设置选项？对于选择表单控件

为了。例如，如果我们有国家，那么通常我们将所有国家分配给国家变量，然后使用 *ngFor 等进行迭代

我想根据表单控件名称更改国家/地区的选项值

所以，(selectionChange)="handleSubmit($event)" 我在第一个下拉菜单中使用

然后在 handleSubmit() 方法中，我想访问特定的表单控件（仅下拉菜单）

并为第二个下拉菜单设置选项（键值对）

我找不到通过访问/设置像 this.form.controls['cmets']

之类的表单控件来设置它的方法

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： angular angular-material frontend

【解决方案1】：

类似：

dataYouWantToShow = [
  { example: '1' },
  { example: '2' },
  { example: '3' },
]

secondDDEmpty = [];

hideSubmit(value) {
  value === 'something' ? this.secondDD = dataYouWantToshow : ''; 
}

并且您在第二个下拉菜单 ngFor 中使用 secondDD。这是一个非常简单的例子，说明它是如何完成的。视情况而定，但您只需要在第二个下拉数组中输入正确的数据。

【讨论】：

感谢您的回复 setValue 将设置选定的值。就我而言，我必须设置全新的选项列表。所以它不会工作
在这种情况下，您需要创建一个空数组并根据第一个选择值填充它。如果第二个下拉菜单取决于第一个选择，您可以隐藏第二个下拉菜单或显示其他内容，例如占位符数据。
我根据您的评论更新了答案。
请查看我的回答以获得更多说明。

【解决方案2】：

<mat-form-field appearance="outline" class="boxchain-width-100" floatLabel="always"
    [ngClass]="{'not-allowed': !isFromCreation && config?.readOnly}">
    <mat-label *ngIf="config?.showLabel">{{ config?.fieldDisplayName }}</mat-label>
    <mat-select #selectField [placeholder]="config?.placeholder" [value]="formValues"
      [formControlName]="formControlName" (selectionChange)="handleSubmit($event, config)">
      <mat-option #options *ngFor="let source of sources" [value]="source.value">
        {{ source.displayName }}
      </mat-option>
    </mat-select>

以上是我的代码。它是用于我的应用程序中所有下拉菜单的动态选择表单控件。所以我们不能为 seconf 下拉菜单做明确的分配。如果您看到它使用 sources 进行迭代。 formControlName 都是那么的动态。

在这种情况下，我们唯一能做的就是在 handleSubmit() 内部，我有第二个下拉名称，通过访问它需要查看如何附加 sources。如何做到这一点需要了解。

【讨论】：

我对材料不太熟悉，但是你如何在你的应用程序的任何地方使用这个下拉菜单？它是一个组件，指令吗？或者你只是简单地复制粘贴它？我个人解决这个问题的方法是，从中创建一个组件并使用@Input，或者在某些情况下创建一个指令，这取决于。但是，我在材料方面的工作很少。您所指的 source 基本上是一个数组。
它是一个通用组件..json 也是通用格式。如果你看到配置。这些是通用键

【解决方案3】：

  <mat-form-field>
<mat-select #SupId="ngModel" required placeholder="Supervisor In Charge" aria- 
  label="Supervisor In Charge" [(ngModel)]="customerNic">
<mat-option>None</mat-option>
 <ng-container *ngFor="let tempIds of customerList">
    <mat-option value="{{tempIds.CustomerNic}}">{{tempIds.CustomerNic}}</mat-option>
 </ng-container>
</mat-select>

打字稿 => customerList: string[] = ["A", "B", "C"];

【讨论】：