Question

我正在使用反应形式。我需要根据其他输入来添加/删除显示在其中的输入。这是该问题的简化方案：

要求用户从列表中选择一个选项。如果没有所需的选项，则有一个开放的输入可以在其中写。如果他们确实从选择中选择了一个选项，则输入必须消失。如果他们没有选择一个选项，则输入必须存在并且必须是必需的。

这是我编写的代码，其中1）不起作用2）感觉它相当丑陋，可以用其他方法制作。

模板：

<form [formGroup]="whateverForm" (ngSubmit)="onSubmit()">
  Choose an option: 
  <select 
    formControlName="option" 
    (change)="verifySelection($event)">
    <option value=''>None</option>
    <option value='a'>Something A</option>
    <option value='b'>Something B</option>
  </select>
  <br>
  <div *ngIf="!optionSelected">
    None of the above? Specify: 
    <input type="text" formControlName="aditional">
  </div>
  <br>
  <br>
  Form current status: {‌{formStatus}}
</form>

代码：

export class AppComponent  {

  whateverForm: FormGroup;
  formStatus: string;
  optionSelected = false;

  ngOnInit() {
    this.whateverForm = new FormGroup({
      'option': new FormControl(null, [Validators.required]),
      'aditional': new FormControl(null, [Validators.required])
    });
    this.whateverForm.statusChanges.subscribe(
      (status) => {
        this.formStatus = status;
      }
    );
  }

  verifySelection(event: any) {
    if (event.target.value !== '') {
      this.optionSelected = true;
      this.whateverForm.get('aditional').clearValidators();
      this.whateverForm.get('option').setValidators(
        [Validators.required]);
    } else {
      this.optionSelected = false;
      this.whateverForm.get('option').clearValidators();
      this.whateverForm.get('aditional').setValidators(
        [Validators.required]);
    }
  }

}

Answer 1

我没有使用事件，而是在其中一个字段中使用了可观察的对象。我提出的问题的确切解决方案是here。

然后我用发现的here解决了它们（它们基本上是相同的东西，但是我包括了我要完成的事情）。

根据输入角度变化的形式

1 个答案: