Question

我有一个地址模型

export class IClientAddress {

    flatNo: string;
    street: string;
    city: string;
    state: string;
    country: string;
}

我使用角度反应形式来构建我的形式，所以这是该部分的代码

this.clientForm = this.fb.group({

      clientName: ['', [Validators.required, Validators.minLength(3)]],
      vatId: [''],
      website: [''],
      phone: [''],
      billingAddress: this.fb.group(new IClientAddress()),
      shippingAddress: this.fb.group(new IClientAddress()),
      clientContacts: this.fb.array([this.fb.group(new IClientContacts())])

    });

因此，我没有为每个表单创建新的表单控件，而是使用类（IClientAddress）创建了一个新的表单组，该类具有我对地址组的所有控件。现在，我只需要验证IClientAddress类中的某些控件如何执行该操作即可？任何帮助将不胜感激。

预先感谢

Answer 1

完全免责声明：我没有使用类来定义表单组。因此，您可能需要稍微调整一下我的答案。我通常会等一个知识渊博的人发帖，但是由于已经坐了一个多月了，所以我觉得我会很不高兴。

如果您只需要检查所有控件是否有效，则 angular默认会执行此操作。也就是说，formGroup仅在其所有字段均有效时才有效。棘手的部分是字段交互的时间。在这种情况下，您需要为formGroup编写一个自定义验证器。

基本上，您不仅可以将验证器传递给单个formcontrol，而且还可以传递给整个表单组。 Angular在their documentation

中有一个示例

/** A hero's name can't match the hero's alter ego */
export const identityRevealedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
  const name = control.get('name');
  const alterEgo = control.get('alterEgo');

  return name && alterEgo && name.value === alterEgo.value ? { 'identityRevealed': true } : null;
};

您可以这样初始化它：

    const heroForm = new FormGroup({
  'name': new FormControl(),
  'alterEgo': new FormControl(),
  'power': new FormControl()
}, { validators: identityRevealedValidator });

如您所见，他们正在使用单个控件来确定较大表单组的错误。说州字段仅在国家名称为“ USA”时适用。你可以做类似的事情

const countryField = control.get('country')
const stateField = control.get('state')
if (countryField.valid && countryField.value === 'USA') {
   return {'requiredStateIfUsa':true}
}

这将使您仅在某些字段上有条件地进行验证。

再说一次，我绝对不是一个尖锐的专家。我希望这个答案能引导您朝正确的方向发展。

编辑：

就像命运那样，我今天必须这样做。您必须禁用不使用的表单控件。

表单组控制角度6

1 个答案: