Question

正在获取错误“错误错误：无法读取未定义的属性”标志”，我不理解为什么在html和js中都定义了原因。

我的HTML

<form [formGroup]='formName'>
  <div formArrayName="Quest">
   <div class="form-group">
     <label for="flag">Quest1</label>
     <input type="radio" class="form-control" value="Y" id="username" name="flag" formControlName = "flag">
     <label for="flag">LastName</label>
     <input type="radio" class="form-control" value="N" id="username" name="flag" formControlName = "flag">
      <input type="text" class="form-control" *ngIf="formName.value.Quest1.flag == 'Y'" id="testName" name="testName" formControlName = "testName">
   </div>
 </div>
</form>     
<button (click)="consoleF(formName.value)">Click</button>                 
<p> value: {{ formName.value | json}}</p>
<p> valid: {{ formName.valid }}</p>`

JS

  formName = this.fb.group({
    Quest:  this.fb.array([
      this.fb.group({
        QUESTION_ID: this.fb.control('51'),
        flag: this.fb.control(''),
        testName: this.fb.control('')
    })
  ])

Answer 1

您可以尝试此代码

Stackblitz Demo

<form [formGroup]='formName'>


  <div formArrayName="Quest"
  *ngFor="let item of formName.get('Quest').controls; let i = index;">
      <div [formGroupName]="i">
        <div class="form-group">
          <label for="flag">Quest1</label>
          <input type="radio" class="form-control" value="Y" id="username" name="flag" formControlName = "flag">

          <label for="flag">LastName</label>
          <input type="radio" class="form-control" value="N" id="username" name="flag" formControlName = "flag">

            <input type="text" class="form-control" *ngIf="item.get('flag').value == 'Y'" id="testName" name="testName" formControlName = "testName">
        </div>
      </div>      
    </div>
</form>

Answer 2

它不起作用，因为在窗体数组中定义了标志。您必须遍历每个表单数组控件。

尝试一下：

组件

formName = this.fb.group({
  Quest:  this.fb.array([
    this.fb.group({
      QUESTION_ID: this.fb.control('51'),
      flag: this.fb.control(''),
      testName: this.fb.control('')
    })
  ])

get quests() {
    return this.formName.get('Quest') as FormArray;
}

HTML文件

<div *ngFor="let quest of quests.controls; let i = index">
    <div [formGroupName]="i">
        // similarly you can add other fiels from array
        <input type="radio" class="form-control" value="Y" id="username" name="flag" formControlName = "flag">
    </div>
</div>

有关更多详细信息，请参见Docs

Answer 3

方法很多

在您的.ts中，返回表单对象

get f() {
   return this.formName.controls;
}

我认为，该错误出现在html

<input type="text" class="form-control" *ngIf="f.Quest.flag == 'Y'" id="testName" name="testName" formControlName = "testName">

使用表单生成器的反应形式

3 个答案: