Angular-如果選擇了選擇欄位上的選項，如何禁用輸入欄位？

我有一個表單，用戶可以從選擇輸入中選擇一個選項。我想在特定條件下啟用或禁用下一個輸入選項。如果選擇輸入上的選定選項的值為 1，則必須禁用下一個欄位，并且它的值必須是null。

<div class="form-floating mb-7" style="display: flex;">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example" #type >
      <option value="1" >Market</option>
      <option value="2" >Category</option>
    </select>
    <label for="floatingSelect">Type</label>
</div>

<div class="form-floating mb-7" style="display: flex;">
    <input type="text" class="form-control" id="floatingInputValue" [value]="type.value == '2' ? item.externalplatform_category : null" #externalCat [disabled]="type.value == '1' ? true : false"/>
    <label for="floatingInputValue">Category</label>
</div>

這是組件檔案：

import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { AppService } from '../../../../app.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-reglas',
  templateUrl: './reglas.component.html',
  styleUrls: ['./reglas.component.scss']
})
export class ReglasComponent implements OnInit {
  public id: any;

  public currentUrl = window.location.href;

  public productRules: any[] = [];

  constructor(private appService: AppService, private ref: ChangeDetectorRef, private route: ActivatedRoute) { }
  
  getProductRules() {
    this.id = this.route.snapshot.paramMap.get('id');

    this.appService.getProductRules(this.id).toPromise()
      .then(res => {
        this.productRules = res
        this.ref.detectChanges()
      })
      .catch(err => {
        console.log(err)
      })
  }
  
  updateProductRule(name: string, externalCat: string, order: number, type: number, id: number) {
    this.appService.updateProductRule(name, externalCat, order, type, id).toPromise()
    .then(res => {
      this.ngOnInit();
    })
    .catch(err => {
      console.log(err)
    })
  }

  toInt(param: string) {
    return parseInt(param)
  }

  deleteProductRule(id: number) {
    this.appService.deleteProductRule(id).toPromise()
    .then(res => {
      this.ngOnInit();
    })
    .catch(err => {
      console.log(err)
    })
  }

  ngOnInit(): void {
    this.getProductRules()
  }

}

有沒有辦法用一些原生的角度函式動態地進行這種改變？或者我應該用 DOM 操作來做嗎？

uj5u.com熱心網友回復：

當條件為真時，對選項使用[disabled]屬性。

<mat-form-field appearance="fill">
  <mat-label>Select an option</mat-label>
  <mat-select [(value)]="selected">
    <mat-option>None</mat-option>
    <mat-option value="1">Option 1</mat-option>
    <mat-option value="selected == '1' ? null : 2" [disabled]="selected == '1'">Option 2</mat-option>
    <mat-option value="selected == '1' ? null : 3" [disabled]="selected == '1'">Option 3</mat-option>
  </mat-select>
</mat-form-field>

<p>You selected: {{selected}}</p>

作業示例：https ://stackblitz.com/edit/angular-qzxndg-wncisa?file=src/app/select-value-binding-example.html

uj5u.com熱心網友回復：

我在html端解決了這樣的情況：

<div class="form-floating mb-7" style="display: flex;">
    <select class="form-select" id="floatingSelect" aria-label="Floating label select example" #type (change)="observeSelect()" >
      <option value="1" >Market</option>
      <option value="2" >Category</option>
    </select>
    <label for="floatingSelect">Type</label>
</div>

<div class="form-floating mb-7" style="display: flex;">
    <input type="text" class="form-control" id="floatingInputValue" [value]="type.value == '2' ? item.externalplatform_category : null" #externalCat [disabled]="type.value == '1' ? true : false"/>
    <label for="floatingInputValue">Category</label>
</div>

在組件中我創建了函式：

observeSelect():void {}

我能想到的最簡單的解決方案。我確切地知道它為什么起作用嗎？不，它有效嗎？是的。

感謝大家的幫助！

標籤：有角度的 打字稿 形式 选择 输入

上一篇：從html表單創建一個json檔案

下一篇：從div移回表單以編輯表單htmlJavascript