Question

我正在尝试使用电子邮件和电话号码创建一个简单的 angular 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

如果您使用反应式表单方法从用户那里获取输入，然后您要根据用户操作启用或禁用字段。因此，您可以执行以下操作...

假设您的FormGroup看起来像这样->

router.post("/MultiCards/:any", (req, res) => {
  let order = req.body.order ? req.body.order : "desc";
  let sortBy = req.body.sortBy ? req.body.sortBy : "_id";
  let limit = req.body.limit ? parseInt(req.body.limit) : 100;

  Product.find({ _id: req.params.any })
    .sort([[sortBy, order]])
    .limit(limit)
    .exec((err, products) => {
      if (err) return res.status(400).json({ success: false, err });
      res
        .status(200)
        .json({ success: true, products, postSize: products.length });
    });
});

现在，如果要根据用户操作禁用/启用电子邮件，密码，名称等。您只需一步即可完成此操作。（访问不同字段的示例）

// cityRef field will be automatically disabled intially, as property disabled: true is set

this.signUpFrom = new FormGroup({
      userData: new FormGroup({
        mobileNumber: new FormControl(null, [Validators.required, Validators.minLength(10), Validators.maxLength(10)]),
        password: new FormControl(null, [Validators.required]),
        userType: new FormControl('VENDOR')
      }),
      otherData: new FormGroup({
        cityRef: new FormControl({ value: null, disabled: true }, [Validators.required]),
        email: new FormControl(null, [Validators.required, Validators.email]),
        address: new FormControl(null, [Validators.required])
      }),
      name: new FormControl(null, [Validators.required]),
    });

您可以将这些代码放在可以在onClick或onChanges等中调用的函数中。

即使您可以通过使用

来获取禁用或启用该字段的当前情况

this.signUpFrom.get('otherData.email').enable(); // To enable
this.signUpFrom.get('otherData.email').disable(); // To disable

this.signUpFrom.get('userData.password').enable(); // To enable
this.signUpFrom.get('userData.password').disable(); // To disable

this.signUpFrom.get('name').enable(); // To enable name field
this.signUpFrom.get('name').disable(); // To disable name field

回答这个问题可能要晚了，但是由于我发现有用，所以我想回答一下，因为这可能对您或其他人有帮助！

Answer 3

您可以使用Angular FormContol属性，例如

的脏

的触摸

的不变

错误

这样做。

您需要做的是检查formControl的状态，并根据您的要求禁用字段或按钮。

Answer 4

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

您只需将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

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

4 个答案: