Question

我有一个下拉菜单和单选按钮[是，否]，该按钮工作正常。但是我必须在更改下拉值时添加一个条件。

如果单选按钮的选定值为“是”，那么我们可以照常使用下拉菜单。
但是，如果单选按钮的选定值为“否”，则无法更改下拉菜单的选定值。无论下拉菜单中选择了什么值，只要保留它即可。如果用户尝试更改下拉值，则会弹出消息提示。如果单选按钮为“否”，则无法更改该值。

我们不想禁用下拉菜单。

我尝试了多种代码，但遇到了一个问题。更改时，我可以显示消息，但所选值正在更改。我不想再次设置相同的值，因为起始值会触发多个事件。

因此，基本上是在下拉列表的更改上。我想检查条件并显示消息，并将下拉列表保留为初始值。这是示例代码。

    this.controls.dropdowneControl.valueChanges.pipe(pairwise()).subscribe(([preData, data]: [any, any]) => {
          debugger;
          if (data !== undefined && data != null) {
            currentValue = data;
            previousValue = preData;


              if (previousValue == 'A' && currentValue == 'B' && radioButtonValue == 'No') {
                this.alert(‘Some message.');

//Don’t change the dropdown value                
                return false;
              }
}});

请提出一些建议。

谢谢

Answer 1

您可能想在控件中使用更改事件。对于无线电控件，您可以使用类似(change)="handleYesNo($event)"的名称。选择No时，将目标（选择/下拉）值重新设置为先前的值，该值位于var中，当单选设置为Yes时可以保存。在这里，选择/下拉菜单根本没有被禁用。当收音机设置为No时，如果用户尝试从下拉列表中更改所选值，则会显示一条消息。

handleSelect(evt) {
var target = evt.target;

if (this.yesOrNo == true)
{
  this.previousValue = target.value;
}
else{
  target.value = this.previousValue;
  alert("You can't change the value if the Yes/No Radio selection is No.")
}
}

您的组件模型：

yesOrNo: boolean;
selectedValue: string;
previousValue: string;

完整的组件：（最简单的）

    import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-simple-form',
  templateUrl: './simple-form.component.html',
  styles: []
})
export class SimpleFormComponent implements OnInit {

  form: FormGroup;
  yesOrNo: boolean;
  selectedValue: string;
  previousValue: string;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      email: [null, [Validators.required, Validators.email]],
      password: [null, Validators.required],
      sayYesOrNo: [null, Validators.required],
    });
  }

  handleYesNo(evt) {
    if (this.yesOrNo == true)
    {
      console.log("Yes");
    }
    else{
      console.log("No");
    }
  }

  handleSelect(evt) {
    var target = evt.target;

    if (this.yesOrNo == true)
    {
      this.previousValue = target.value;
    }
    else{
      target.value = this.previousValue;
      alert("You can't change the value if the Yes/No Radio selection is No.")
    }
  }
}

HTML：

<form class="form-horizontal" [formGroup]="form">

  <div class="form-group">
    <div class="col-sm-12">      

      <input [(ngModel)]="yesOrNo" type="radio" (change)="handleYesNo($event)" formControlName="sayYesOrNo" name="sayYesOrNo" value="1"> Yes<br>
      <input [(ngModel)]="yesOrNo" type="radio" (change)="handleYesNo($event)" formControlName="sayYesOrNo" name="sayYesOrNo" value="0"> No<br>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-12">      
      <label for="dropDown" class="control-label">Select:</label>
      <select class="form-control" id="dropDown" (change)="handleSelect($event)" [(ngModel)]="selectedValue" formControlName="dropDown" name="dropDown">
        <option value="opt1" >Option 1</option>
        <option value="opt2" >Option 2</option>
      </select>

    </div>
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!form.valid">
    Submit
  </button>

</form>

希望有帮助。我在这里只是简单地演示了这一点。

如何防止在Angular中选择下拉值

1 个答案: