[ngValue] 内的三元运算符；动态取消选择值

Question

如果用户从另一个下拉列表更改他们的选择（这也会隐藏有问题的选择输入），我想从表单上的选择输入中清除值（反应式）。理想情况下，我想能够在模板中内联执行此操作，而不是向控制器添加代码。我的一个想法是尝试在绑定我的选项的 [ngValue] 上使用三元运算符。

上下文代码：

<form [formGroup]="myForm">
<div>
    <label for="constrainingDropdown">Constraining Dropdown</label>
    <div>
        <select name="constrainingDropdown" formControlName="constrainingDropdown">
            <option disabled value="">Select an Option</option>
            <option *ngFor="let opt of constraints" [ngValue]="opt.code">{{opt.value}}</option>
        </select>
    </div>
    <div [hidden]="myForm.controls.constrainingDropdown.value !== 'OPT1'">
       <div> 
            <select name="constrainingDropdown" formControlName="myDropdown">
                <option disabled value="">Select an Option</option>
   RELEVANT ==> <option *ngFor="let myOpt of options" [ngValue]="{myForm.controls.constrainingDropdown.value !== 'OPT1' ? '' : myOpt.code}">{{myOpt.value}}</option>
            </select>
        </div>
    </div>
</div>
</form>

这会导致某种模板解析错误：是否可以在 ngValue 中使用三元运算符？还是我需要另一种解决方案？同样，不要为这个简单的逻辑在控制器中编写代码。

当前方法：订阅表单更改事件

this.myForm.controls['constrainingDropdown'].valueChanges.subscribe (
    (opt: string) => {
        if(opt === 'OPT1') {
           this.myForm.controls.myDropdown.patchValue('');
        }
    }
)

Answer 1

直接回答你的问题：确实可以在模板中使用三元

我怀疑你的模板语法是否正确。以下内容应该适合您：

改变 [ngValue]="{myForm.controls.constrainingDropdown.value !== 'OPT1' ? '' : myOpt.code}"

到 [value]="myForm.controls.constrainingDropdown.value !== 'OPT1' ? '' : myOpt.code"。正如我之前所说的那样，您不应该将三元组括在大括号中。我以前从未见过[ngValue] 被使用过，正确的语法是[value]。

Answer 2

你可以使用ngModel进行双向绑定，然后使用ngIf显示一些东西：

<form>
  <div *ngIf="id === 1">
    <select name="id" [(ngModel)]="id">
      <option *ngFor="let option of options" [ngValue]="option.code">
        {{option.code}}
      </option>
    </select>
  </div>

  <div *ngIf="id === 2">
    <select name="id" [(ngModel)]="id">
      <option *ngFor="let option of options" [ngValue]="option.code">
        {{option.code}}
      </option>
    </select>
  </div>
</form>

这是working Plunker。

Answer 3

您发布的代码有一些奇怪的地方。我会尽量猜测你的意思。

首先要做的是，我们将纠正您模板中的错误，并通过删除双 ! 使逻辑更易于阅读，您的意思是 === 或您的意思是 !== 第二个！开头很混乱，可能会导致意外行为（假设选择 OPT1 时隐藏）：

<div [hidden]="myForm.controls.constrainingDropdown.value === 'OPT1'">

然后，我们将根据您的示例和代码更新您的另一个下拉列表，其中 formControlName 似乎不正确，而是将名称设置为 myDropdown，我们还将在未选择事件 OPT1：

<select name="constrainingDropdown" formControlName="myDropdown">
   <option disabled value="">Select an Option</option>
   <option *ngFor="let myOpt of options" [ngValue]="myOpt.code">{{myOpt.value}}</option>
</select>

最后我们要订阅第一个选择的.valueChanges 并从那里驱动我们的自定义逻辑：

constructor(private _fb: FormBuilder) {
  this.myForm = _fb.group({
    constrainingDropdown: [''],
    myDropdown: ['']
  });

this.myForm.controls['constrainingDropdown']
  .valueChanges.subscribe(value => {
    if(value === 'OPT1') {
      this.myForm.controls['myDropdown'].setValue('');
      this.myForm.controls['myDropdown'].disable();
    } else {
      this.myForm.controls['myDropdown'].enable();
    }
  });
}

附录 - 如果我们想要做的只是删除第二个下拉列表的值从整体myForm.value 一个简单的disable() 控件上的所有是必需的，因为该值仅包括启用的控件' 值。

这是Reactive Forms Implementation

Answer 4

在反应式表单中，您可以动态添加/删除控件。您可以初始化一次表单，然后根据您的要求添加/删除表单控件..

绑定formControlName 可以通过三元运算符完成，然后在打字稿中根据应用的条件添加/删除这些控件

例子：

                      USING REACTIVE FORMS IN ANGULAR

TEMPLATE ( HTML )

 <input [formControlName]=" condtion ? 'control1' : 'control2'" />


TYPE SCRIPT (TS)

myFormGroup:FormGroup

ngOnInit(){
this.initForm()
this.addControlsOnContionalBasis()
}

initForm() {
  this.myFormGroup= new FormGroup({
});


addControlsOnContionalBasis(){
if(condtion){
    this.myFormGroup.addControl('control1',FormControl(null,Validators.required));


}else{
    this.myFormGroup.addControl('control2',FormControl(null,Validators.required));

}
}