ngIf и hidden не являются обязательным свойством, когда я передаю условие из машинописи

Question

Я создаю динамическую форму, анализируя файл json.Поэтому мне нужно связать скрытый / ngIf в зависимости от условия.Я передаю условие из файла машинописного текста, и то же самое используется в файле 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 в зависимости от выбора радиокнопки.Привязка работает, когда я помещаю условие непосредственно в файл шаблона, и то же самое не работает, когда я отправляю его из машинописного текста и использую то же самое в файле шаблона.ngIf * показывает правильный div при загрузке страницы, но переключение не работает.

Поскольку форма будет создаваться динамически при синтаксическом анализе json, мне нужно передать условие из машинописного текста.

Может ли кто-нибудь помочь мне, есть ли что-то, что я пропускаю.

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'); }