Question

这对我来说有点混乱。我有一个表格，里面有两个部分。

个人资料
地址（一旦面板必须使用复选框打开/关闭，就应该验证）

我正在使用角度v4和反应形式。

this.registerForm = this.fb.group({
      title: ['', [Validators.required]],
      address: this.fb.group({
        addressline1: [''],
        addressline2: [''],
        area: [''],
        zipcode: [''],
        city: [''],
        country: [''],
        state: ['']
      })
    });

点击地址复选框后，我不得不说这些是必填字段，请输入值，关闭/未选中错误应该关闭。

我试过这样的话：

onAddressCheck() {
    if (this.registerForm.controls.address.valid) {
      this.registerForm.controls.address.get('addressline1').setValidators(Validators.required);  
    } else {
      alert("form is not valid.");
    }
  }

并在模板中：

<div class="checkbox">
  <label data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapseOne">
    <input type="checkbox" formControlName="permanent_addr_chkbx" (change)="onAddressCheck()" />
    <font color="white">Address</font>
  </label>
</div>

<div class="form-group collapse" id="collapse" aria-expanded="false">
  <input type="text" formControlName="addressline1">
  <p *ngIf="registerForm.get('permanent_address.addressline1').errors">This is required</p>
</div>

<p *ngIf="!addressline1.errors.required">This is required</p> // earlier i was using this.

但没有得到任何东西。

那么怎么做我不知道？任何人都可以帮助我吗？

由于

Answer 1

这显然取决于您的复选框。假设您有一个属性showErrors: boolean，并且您的模板中有一个显示这些错误的部分 - 或类或类似的。

您可以使用一个响应checkboxChange的方法并翻转此标志。并且根据旗帜的状态，您的错误将被显示或不显示。

Answer 2

您可以在复选框设置为true后重新创建表单：

constructor(private fb: FormBuilder) {
  this.registerForm = this.fb.group({
    title: ['', [Validators.required]]
  });
}

handleClickOnAddressCheckbox() {
  if (this.myCheckboxValue) {
    this.registerForm = this.fb.group({
      title: ['', [Validators.required]],
      address: this.fb.group({
        addressline1: [''],
        addressline2: [''],
        area: [''],
        zipcode: [''],
        city: [''],
        country: [''],
        state: ['']
      })
    });
  } else {
    this.registerForm = this.fb.group({
      title: ['', [Validators.required]]
    });
  }
}

如果未选中复选框，则必须在HTML中隐藏字段。

如果单击复选框上的表单有效，如何设置验证？

2 个答案: