Question

我正在使用Angular 2+和Material（https://material.angular.io）。我使用步进器来构建一个简单的表单。除了以下情况外，它的效果非常好。我想动态地改变[stepcontrol]的值。

所以我想改变这个：

<mat-step [stepControl]= "Form_1">

到这个

<mat-step [stepControl]= "Form_1 && Form2">

当我按下按钮或做其他事情时。

修改

HTML

<mat-horizontal-stepper [linear]="isLinear">
   <mat-step [stepControl]="Form1">   <-------!!!!!
      <ng-template matStepLabel>1 Step</ng-template>
      <form [formGroup]="Form1">
         <mat-form-field>
            <input matInput placeholder="Name1" formControlName="Name1" required>
         </mat-form-field>
         <div>
            <button mat-button matStepperNext>Next</button>
         </div>
      </form>
      <form *ngif = " variable-x == 1" [formGroup]="Form2">
      <mat-form-field>
         <input matInput placeholder="Name2" formControlName="Name2" required>
      </mat-form-field>
      <div>
         <button mat-button matStepperNext>Next</button>
      </div>
      </form>
   </mat-step>
   < a button to switch the value of variable x from 0 to 1>
   ---> Next Step ....
</mat-horizontal-stepper>

这两种形式在TS文件中得到验证。仅当变量-x为1时才显示form2。一切正常，但不是步骤控制。

以下是可能的：

<mat-step [stepControl]="Form1">

如果Form1有效，您可以转到下一步。这项工作

<mat-step [stepControl]="Form1 && Form2">

如果Form1和Form2有效，您可以转到下一步。这项工作

<mat-step [stepControl]="(Form1 && variable-x == 0 ) || (Form2 && Form1 && variable-x == 1)">

我其实想要这样：如果variable-x等于1，它应该只使用Form2作为条件.Form2只有在可见时才能填写，但它不起作用。

Answer 1

作为解决方案，您可以设置boolean以检查是否点击了按钮（您说过的话）：

TS代码

：

btnClicked : boolean = false;
onButtonClick(){
   this.btnClicked = true;
}

Html代码中的

：

<mat-step *ngIf="!btnClicked" [stepControl]= "Form_1">
<mat-step *ngIf="btnClicked" [stepControl]= "Form_1 && Form2">

如何更改Angular 2中的特定值

1 个答案: