Angular 根据其他选择更改将选择值更改为 null

Posted 2023-03-24

【中文标题】Angular 根据其他选择更改将选择值更改为 null

【英文标题】：Angular changing a select value to null based on other select change

【发布时间】：2021-12-19 02:47:07

【问题描述】：

我正在尝试使用具有多个选择的 ng 模板添加弹出表单。在 ngOnInit() 上，我将所有值添加为 null 其中一些选择是基于使用 ngif 的先前选择值显示的 问题是，当我更改值时，第二个选择消失但它的值仍然相同，这是我的代码：

<div *ngIf="cosForm.value.customer=='617e7d83c68272eba7c36c13'">
    
    <div class="form-group text-right">
      <label class="col-form-label" for="service">customer</label>
      <select ng-model="selectedItem" class="form-control" placeholder="customer" autocomplete="customer"
        formControlName="customer" required
        [ngClass]=" 'is-invalid': submitted && f.customer.errors, 'is-valid': f.customer.touched && !f.customer.errors ">
        <option *ngFor="let customer of myCustomers" value="customer._id">customer.name</option>
      </select>
      <div *ngIf="submitted && f['customer'].errors" class="invalid-feedback">
        <div *ngIf="f['customer'].errors.required">customer is required</div>
      </div>
    </div>

当我更改第一个选择值时，我希望将第二个 ng 选择值设置为 null 我尝试使用

<select onChange="cosForm.value.customer=null"> </select>

第一次选择但我没有得到任何结果

我想使用：

但我不知道如何影响价值

顺便说一句：即使我更改了第一个选择，而不更改第二个，我认为第二个选择值会自动更改，因为我的提交按钮更改为无效，并且只有当我填写第二个选择时它才有效

【问题讨论】：

您可以使用响应式表单以更简单的方式和更好的方式完成此操作。你想在这里实现什么

【参考方案1】：

如果您试图基于一个选择来使另一个选择无效，那么您可以使用这个来监听第一个选择标签中的变化

form.controls.customer.valueChanges.subscribe(()=>
  // Set the value of the second select to null here
  form.controls.secondSelect.reset()
  
)