Question

我用角形材料创建了反应形式。我有一个选择下拉列表，因此基于该下拉列表选择。输入字段将更改。现在使用下面的代码。如果我只是提交它，它将数组发送到我的后端。如果我启用按钮的禁用选项，则由于我的表单有8个输入，因此无法提交。但是，当我选择一个选项时，它将只有6个字段。因此，我如何进行验证以限制用户提交空白表格。

下面是我的HTML代码

(1280,720)

以下是我的ts文件：

<div class = "tp-container">
      <form [formGroup]="myForm" (ngSubmit)="submitForm()">
        <!-- Name -->
        <mat-form-field class="example-full-width" >
          <input matInput placeholder="Name" formControlName="name">
          <!-- error -->
          <mat-error *ngIf="errorHandling('name', 'required')">
            You must provide a <strong> Name</strong>
          </mat-error>
        </mat-form-field>

        <!-- Email -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" formControlName="email">
          <!-- error -->
          <mat-error *ngIf="errorHandling('email', 'required')">
            You must provide a <strong>email</strong>
          </mat-error>
        </mat-form-field>

            <!-- Class -->
            <mat-form-field>
                <mat-label>Item</mat-label>
                <mat-select [(value)]="selected" formControlName="Items">
                  <mat-option [value]="item" *ngFor="let item of Items">{{item}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

     <!-- Eng Name -->
     <mat-form-field class="example-full-width">
        <input matInput placeholder="Name" formControlName="engname">
        <!-- error -->
        <mat-error *ngIf="errorHandling('engname', 'required')">
          You must provide a <strong>Name</strong>
        </mat-error>
      </mat-form-field>

       <!-- JP Name -->
       <div *ngIf="myForm.get('Items').value == 'Mobile">
       <mat-form-field class="example-full-width" >
        <input matInput placeholder="JP Name" formControlName="jpname">
        <!-- error -->
        <mat-error *ngIf="errorHandling('jpname', 'required')">
          You must provide a <strong> Japanese Name</strong>
        </mat-error>
      </mat-form-field></div>

      <!-- LAN ID Name -->
      <div *ngIf="myForm.get('Items').value == 'Software'">
        <mat-form-field class="example-full-width" >
         <input matInput placeholder="LAN ID" formControlName="lan">
         <!-- error -->
         <mat-error *ngIf="errorHandling('lan', 'required')">
           Please provide your <strong> LAN ID</strong>
         </mat-error>
       </mat-form-field></div>

                    <!-- Application Name -->
      <div *ngIf="myForm.get('Items').value == 'Network'">
        <mat-form-field class="example-full-width" >
         <input matInput placeholder="Application Name" formControlName="app">
         <!-- error -->
         <mat-error *ngIf="errorHandling('app', 'required')">
           Please provide the <strong>Application Name</strong>
         </mat-error>
       </mat-form-field></div>

        <!-- Submit -->
        <div class="button-wrapper">
          <button type="submit" color=#C93C6A class="btn-block" >Submit</button>
        </div>

      </form>
    </div>

}

Answer 1

您可以通过两种方式检查验证

 isAddedElement : boolean = false;
 changeForValue() {
    this.isAddedElement.valueChanges.subscribe(x => {
      this.isAddedElement = x;
      if (x) {
        this.myForm.addControl('ctrl1', new FormControl('', Validators.required));
        this.myForm.addControl('ctrl2', new FormControl('', Validators.required));
      } else {
        this.myForm.removeControl('ctrl1');
        this.myForm.removeControl('ctrl2');
      };
    });
  }

HTML

            <div class="row" *ngIf="isAddedElement">
          <div class="col s12">
            <mat-form-field class="example-full-width">
              <input matInput placeholder="ctrl1" required formControlName="ctrl1">
              <mat-error *ngIf="myForm.get('ctrl1').hasError('required')">
                ctrl1 is <strong>required</strong>
              </mat-error>
            </mat-form-field>
          </div>
        </div>

如何验证角动输入的反应形式

1 个答案: