我在 Angular 上有一个表单,允许根据在下拉列表中选择的值显示输入。
这是我的代码示例:
(如果选择两个输入出现)
https://stackblitz.com/edit/angular-fqkfyx
如果我离开 [formGroup] = "usForm"输入显示不工作。另一方面,如果我删除标签形式的 [formGroup] = "usForm",我的代码将按我的意愿工作。所以这个问题和[formGroup] = "usForm"有关
我的 html:
<div class="offset-md-2">
<form [formGroup]="usForm">
<div class="div-champs">
<p id="champs">Type
<span id="required">*</span>
</p>
<div class="select-style ">
<select [(ngModel)]="selectedOption" name="type">
<option style="display:none">
<option [value]="o.name" *ngFor="let o of options">
{{o.name}}
</option>
</select>
</div>
</div>
<p id="champs" *ngIf="selectedOption == 'two'">Appears
<input type="appears" class="form-control" name="appears">
</p>
</form>
</div>
我的组件.ts:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-create-us',
templateUrl: './create-us.component.html',
styleUrls: ['./create-us.component.css']
})
export class CreateUsComponent implements OnInit {
public usForm: FormGroup;
public selectedOption: string;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.createForm();
}
createForm() {
this.usForm = this.fb.group({
'type': [null, ],
'appears': [null, ],
});
}
options = [
{ name: 'first', value: 1 },
{ name: 'two', value: 2 }
];
}
我尽可能地简化了我的问题,实际上它是一个有十几个输入的大表格
我需要你的帮助,在此先感谢
问候, 瓦伦丁
最佳答案
您应该使用 formControlName
而不是 [(ngModel)]
。
然后在比较中,您应该与 usForm.value.type
而不是 selectedValue
进行比较。
试一试:
<div class="offset-md-2">
<form [formGroup]="usForm">
<div class="div-champs">
<p id="champs">Type
<span id="required">*</span>
</p>
<div class="select-style ">
<select formControlName="type" name="type">
<option style="display:none">
<option [value]="o.name" *ngFor="let o of options">
{{o.name}}
</option>
</select>
</div>
</div>
<p id="champs" *ngIf="usForm.value.type == 'two'">Appears
<input type="appears" class="form-control" name="appears">
</p>
</form>
</div>
这是一个 Sample StackBlitz供您引用。
关于html - Angular ngIf formGroup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53375838/