Question

我创建了一个根据当前页面生成表单的组件：

<div *ngIf="checkCurrentDetails() == 'Dimension'" >

<form [formGroup]="form">
<div formGroupName="name">
  <input formControlName="first" placeholder="First">
  <input formControlName="last" placeholder="Last">
</div>
<input formControlName="email" placeholder="Email">
<button>Submit</button>
</form>
<p>Value: {{ form.value | json }}</p>
<p>Validation status: {{ form.status }}</p>


</div>
<div *ngIf="checkCurrentDetails() == 'Dimension Attributes'" >

 <form [formGroup]="form">
  <div formGroupName="name">
  <input class="search" formControlName="first" placeholder="First">
  <input formControlName="last" placeholder="Last">
 </div>
 <input formControlName="email" placeholder="Email">
 <button>Submit</button>
 </form>
 <p>Value: {{ form.value | json }}</p>
 <p>Validation status: {{ form.status }}</p>

 </div>

使用此测试方法：

    checkCurrentDetails(){
        if(this.currentDetails['site'] == 'Dimension Attributes'){
           this.form = this.fb.group({
               name: this.fb.group({
                  first: ['Nancy', Validators.minLength(2)],
                last: 'Drew',
            }),
            email: '',
        });
        return this.currentDetails['site'];
    }
    if(this.currentDetails['site'] == 'Dimension'){
        this.form = this.fb.group({
            name: this.fb.group({
                first: ['Nanci', Validators.minLength(2)],
                last: 'Drew',
            }),
            email: '',
        });
        return this.currentDetails['site'];
    }
}

它正在根据网站很好地生成表单，并且正在生成此表单：

http://www.pic-upload.de/view-32540301/test.jpg.html

在文本框中，您将能够看到预定义的测试内容。例如，第一个文本框：＆＃34; Nanci＆＃34;等等但现在我的问题。我无法在这些文本框中键入，更改或插入文本。似乎有些事情正在阻止它。

所以我尝试了另一件事来测试它是否与表单有关。我创建了一个文本框

<input type='text'>

在表单之外，运行良好。我可以在此框中输入文字，但不能输入表格内的文本框，我不知道为什么？

Answer 1

问题出在<div *ngIf="checkCurrentDetails() == 'Dimension Attributes'">。

当您在文本框中键入时，将运行ChangeDetection并重新评估模板。因此，每次键入文本框时，都会调用checkCurrentDetails()函数并重新创建/呈现表单！因此，您会一次又一次地看到表单的初始状态，并感觉打字正在被阻止。

只需将其更改为

即可

<div *ngIf="currentDetails.site == 'Dimension Attributes'">它有效！

以下是工作样本的Plunker链接： http://plnkr.co/edit/psjqZZvfx7GyOVAgkSJj?p=preview

Angular2表单输入 - 无法填写文本

1 个答案: