Question

我对Angular世界相当新，并且有要求实现。我有一个下拉列表丢失填充了TS组件的值，四个值，最后一个是其他。我希望看到的是，当在下拉列表中选择“其他”选项时，我想仅显示该选项的输入元素。我正在使用Angular Material，并且在下午的大部分时间里一直在努力。

以下是我的代码

 <div class="row">
      <div class="col-md-4">
        <mat-form-field>
          <mat-select placeholder="Company Type" formControlName="companyType"  #companyType required>
            <mat-option *ngFor="let companyType of companyTypes" [value]="companyType">
                  {{ companyType }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>

      <div ng-show="md-selected-text ==='Other'" class="col-md-8">
           <mat-form-field>
               <input matInput placeholder="Explain">
            </mat-form-field>                
      </div>
</div>

这是组件的Typescript代码

export class HealthPlanComponent implements OnInit {
companyTypes = ['Health Insurance Company/HMO', 'Self-Insured Employee 
               Health Plan', 'Self-Insured Health & Welfare Fund', 'Other'];
}

submitTppClaim(): void {
    this.submitted = true;
    newClaim.companyType = this.consumerClaim.get('companyType').value;
      .subscribe(claim => {
      this.submitted = false;
      this.submittedClaim = claim;
      this.notSubmitted = false;
    });
}

非常感谢任何帮助。

Answer 1

您可以使用以下内容：

* ngIf =“yourFormName.get（'companyType'）。value ==='Other'”

显示元素如果使用Angular 4和Reactive Forms选择了正确的选项

1 个答案: