Question

我有一个下拉菜单。根据下拉菜单的选择，我需要显示一些列以及每个选择都通用的现有列。

My html:

<mat-form-field class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <mat-select [(ngModel)]="selectedValue" placeholder="EntityName" (selectionChange)="changeEntity($event.value)" [ngModelOptions]="{standalone: true}">
        <mat-option *ngFor="let type of types" [value]="type.viewValue">
          {{type.viewValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>

 <div *ngIf="selectedValue === 'One'" class="row formGroup">
    <mat-form-field class="example-full-width" class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <input matInput placeholder=" OneID" type="text" id="oneid" formControlName="oneid">
    </mat-form-field>
  </div>

  <div class="row formGroup">
    <mat-form-field class="example-full-width" class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <input matInput placeholder="Name" type="text" id="commonname" formControlName="commonname">

      </div>
    </mat-form-field>
<div class="formGroup" *ngIf="selectedValue === 'Two'"
    <mat-form-field class="example-full-width" class="col-xl-6 col-lg-3 col-md-3 col-sm-12 col-xs-12">
      <input matInput  type="text" id="username" formControlName="twoname">
    </mat-form-field>
 </div>

我的Ts文件：

  myForm = this.fb.group( {
    oneid: ['', Validators.required],
     commonname: ['', Validators.required],
     oneid: ['', Validators.required],
     twoname:['',Validators.required],

   })

 get f() {

    return this.myForm.controls;
 }
 if (this.myForm.invalid) {
  console.log("invalid");
  return;
}

所以我的疑问是如何进行验证？如果我为单独的字段保留formcontrol名称，则我的表单返回无效。如何在没有单独的FormControl名称的情况下对此嵌套输入进行验证并获取每个输入字段的值？请引导我。

Answer 1

您不需要避免使用表单控件名称。您需要的是动态验证。

您的onSubmit()方法内部动态更改验证规则。您可以编写如下代码：

if(some-condition) {
this.entityForm.get('eid').clearValidators();
this.entityForm.get('principalEntity').clearValidators();
this.entityForm.get('tel').clearValidators();
this.entityForm.get('rilid').clearValidators();

this.entityForm.get('eid').updateValueAndValidity();
this.entityForm.get('principalEntity').updateValueAndValidity();
this.entityForm.get('tel').updateValueAndValidity();
this.entityForm.get('rilid').updateValueAndValidity();
}

请注意，您需要根据特定条件通过调用clearValidators()来清除特定控件上的验证规则。另外，您需要致电updateValueAndValidity()来重新评估他们。

如何基于角度6中的条件验证表单？

1 个答案: