Angular

Question

我有一个表单，用户可以从 select 输入中选择一个选项。我想在特定条件下启用或禁用下一个输入选项。如果 select 输入上的 selected 选项值为 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()
  }

}

有没有什么方法可以使用某些本机 angular 函数动态地进行此更改？或者我应该用 DOM 操作来做吗？

Answer 1

当条件为真时，在选项上使用 [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%2Fapp%2Fselect-value-binding-example.html

Answer 2

我在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 {}

我能想到的最简单的解决方案。我确切地知道它为什么有效吗？不，它有效吗？是的

谢谢大家的帮助！

Angular - 如果 select 字段上的选项被 selected，如何禁用输入字段？

Angular - How to disable an input field if an option on a select field is selected?

forms

select

input

typescript