Angular 2 反应形式字段启用/禁用

Question

我正在尝试使用电子邮件和电话号码创建一个简单的angular 2 反应式表单。下面是我的代码。我在这里面临两个问题。

1. 最初验证按钮应该被禁用。它应该被启用，只有在输入电子邮件字段时。

2. 第二个问题是我想一次只启用一个字段。如果用户开始输入电子邮件，则应禁用电话号码，反之亦然。如果输入电子邮件或电话号码，将启用保存按钮

我如何实现这一目标？

<form [formGroup]="personalDtlsForm">
  <div class="form-group" [ngClass]="displayFieldCss('inputValue')">
    <div class="row">
      <div class="col">
        <label for="inputValue" class="control-label required">Email</label>
      </div>
    </div>
    <div class="row">
      <div class="col-9">
        <input type="text" id="email" class="form-control" formControlName="inputValue">
      </div>
      <div class="col-3">
        <button type="button" id="verifyBtn" class="btn btn-primary btn-large" (click)="verify()">Verify</button>
      </div>
    </div>

  </div>

  <div class="form-group row" [ngClass]="displayFieldCss('phoneNo')">
    <div class="col paddingTop">
      <label for="phoneNo" class="userID control-label textColor">Phone
      </label>
      <input type="number" class="form-control" id="phoneNo" formControlName="phoneNo">
    </div>
  </div>
  <div class="viewdetailbtn">
    <button type="button" [disabled]="!personalDtlsForm.valid" class="btn btn-primary btn-large btnwidth marginBottom" (click)="savePersonalDtls()">Save</button>
  </div>
</form>


this.personalDtlsForm = this.formBuilder.group({
  inputValue: [null, [Validators.required, Validators.email]],
      phoneNo: [null, Validators.required]
});

Answer 1

您可以通过以下方式启用/禁用控件：

this.personalDtlsForm.controls['phoneNo'].enable()

this.personalDtlsForm.controls['phoneNo'].disable()

因此，要禁用一个字段，您必须订阅valueChanges另一个字段的 ，并禁用另一个字段，如果value !== ''或类似的。

例子：

this.personalDtlsForm.controls['phoneNo'].valueChanges.subscribe(
    value => {
        if(value !== ''){
            this.personalDtlsForm.controls['inputValue'].disable();
        } else {
            this.personalDtlsForm.controls['inputValue'].enable();
        }
    }
);

当然还有同样的订阅 inputValue formControl

对于您的第二个问题，您可以isFormValid在 if 语句中设置一个变量，value !== ''这意味着至少输入了其中一个。

启用按钮的最终检查可能类似于：

isFormValid && personalDtlsForm.valid

Answer 2

最初验证按钮应被禁用。仅当输入电子邮件字段时才应启用它。

您可以简单地绑定字段disabled的有效状态email。请注意，当输入的状态被禁用时，它不会是valid或invalid。

<button type="button" [disabled]="personalDtlsForm.get('inputValue').invalid">Verify</button>

第二个问题是我只想一次只启用一个字段。如果用户开始输入电子邮件，则应禁用电话号码，反之亦然。

为了禁用表单中的所有其他表单控件，首先我们需要访问所有它们，我们可以通过formGroupDirective.directives.
我创建了一个自定义指令来实现你想要的。

@Directive({
  selector: '[disableAllOthers]'
})
export class DisableAllOthers {
  constructor(
    private elem: ElementRef, 
    private control: NgControl,
    private renderer: Renderer2
  ) {
    this.elem.nativeElement.addEventListener('mouseover', () => {
      (this.control as FormControlName).formDirective.directives.forEach(elem => {
        if (elem === this.control) {
          elem.control.enable();
        } else {
          elem.control.disable();
        }
      });
    });
  }
}

For click/focus事件在输入被禁用时不会触发，这里我disable/enable通过鼠标悬停事件进行更改，请参阅演示。