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

您可以使用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 2

您发布的代码有一些奇怪的事情。我会最好地猜测你的意思。

首先要做的是我们要纠正你的模板中的错误，并通过移除双重来更容易阅读逻辑！，或者你的意思= =或者你的意思！==第二个！在开始时令人困惑，可能会导致意外行为（假设选择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();
    }
  });
}

附录 - 如果我们想要做的就是从<{1}}移除第二个下拉列表的值，控件上的一个简单myForm.value就是值所需的全部值仅包含已启用控件的值。

这是Reactive Forms Implementation

Answer 3

直接回答您的问题：确实可以使用三元内部模板

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

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

要 [value]="myForm.controls.constrainingDropdown.value !== 'OPT1' ? '' : myOpt.code"。正如我之前所说的那样，你不应该用括号括起你的三元组。我之前从未见过[ngValue]，正确的语法是[value]。

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));

}
}

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

4 个答案: