Question

我正在通过解析json文件来创建动态表单。所以我需要根据条件绑定隐藏的/ ngIf。我从typescript文件传递条件，并在html文件中使用相同的东西。以下是我的代码更改

product.component.ts

export class ProductComponent implements OnInit {

  condition : any;
  productForm : FormGroup;

constructor(productFormBuilder : FormBuilder) {
      this.productForm = productFormBuilder.group({
          'name' : ["", [Validators.required, Validators.minLength(5), Validators.maxLength(10)]],
          'test' :["",[]],
          'middleName':["",[]],
          'lastName':["",[]]

      });

      this.condition="!(this.productForm.get('test').value==='testing')";
   }

}

product.component.html

  <form [formGroup]="productForm" (submit)="onSubmit()">
  <div>
      <label>Name</label>
      <input type="text" formControlName="name" name="name" >
      <div *ngIf="productForm.controls['name'].invalid && (productForm.controls['name'].dirty || productForm.controls['name'].touched)">
        <div style="color:red" 
            *ngIf="productForm.controls['name'].errors.required">Name is required</div>
        <div style="color:red" 
            *ngIf="productForm.controls['name'].errors.minlength">Name is minimum of 5 characters</div> 
      </div>

  </div>
  <div>
      <label>Label</label>
      <input type='radio' formControlName='test' value='testing' name='test'> Testing
      <input type='radio' formControlName='test' value='overflow' name='test'> Overflow

  </div>
  <div  [hidden]= "!(this.productForm.get('test').value==='overflow')"> 
    <label>Overflow</label>
    <input type='text' formControlName='middleName' > 

</div>
<div *ngIf="condition">
        <div  >
                <label>Testing</label>
                <input type='text' formControlName='lastName' > 
            </div>
</div>
<div [hidden]="condition">
        <div  >
                <label>Testing</label>
                <input type='text' formControlName='lastName' > 
            </div>
</div>

 <button type="submit">Submit</button>

</form>

在我的模板文件中，我有名为“test”的单选按钮，我需要根据单选按钮选择显示相应的div。当我将条件直接放在模板文件中时，绑定正在工作，当我从typescript发送它并在模板文件中使用相同的东西时，同样的东西不起作用。 ngIf *在页面加载时显示正确的div，但切换不起作用。

由于表单是通过解析json动态创建的，我需要从typescript中传递条件。

有人可以帮助我，我有什么遗失。

Answer 1

首先，condition应该是布尔类型而不是字符串。
this.condition="!(this.productForm.get('test').value==='testing')";应替换为 this.condition=!(this.productForm.get('test').value==='testing');

其次，您缺少无线电选择中的变化检测。最初，它已设置但是当您更改它时，您不会更新condition。
<input type='radio' formControlName='test' value='testing' name='test' (click)="updateCondition()"> Testing <input type='radio' formControlName='test' value='overflow' name='test' (click)="updateCondition()"> Overflow
然后在你的组件文件中 updateCondition(){ this.condition=!(this.productForm.get('test').value==='testing'); }

当我从typescript传递条件时，ngIf和hidden不是绑定属性

1 个答案: