代码之家 › 专栏 › 技术社区 › Nancy

角度2反应形式字段启用/禁用

angular-reactive-forms angular

Nancy · 技术社区 · 7 年前

我试图创造一个简单的 角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]
});

3 回复 | 直到 7 年前

Pengyy 7 年前

初始验证按钮应禁用。只有在输入email字段时,才应启用它。

你可以简单地绑定 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();
        }
      });
    });
  }
}

为了 click / focus 当输入被禁用时,事件不会触发,这里我更改了 disable/enable 通过 鼠标悬停 事件,请参阅 demo 。

Venomy 7 年前

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

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语句中,当 价值!=’ 这意味着至少有一个输入。

启用按钮的最终检查可能如下:

isFormValid && personalDtlsForm.valid

halfer 6 年前

你可以用角度 FormContol 属性,如

肮脏的
感动的
原封不动
错误

做这个。

您需要做的是检查表单控件的状态,并根据您的要求禁用字段或按钮。