我有 3 个单选按钮,当我单击每个按钮时,应该会出现不同的形式。 但我遇到了响应式(Reactive)表单与表单控件发生冲突的问题
<div class="ui-g-12 ui-md-12 ui-lg-12 ui-fluid espacamento-baixo">
<div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="imagem" label="Imagem" inputId="imagem"></p-radioButton></div>
<div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="video" label="Video" inputId="video"></p-radioButton></div>
<div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="link" label="Link" inputId="link"></p-radioButton></div>
<div class="ui-g-3"><p-radioButton formControlName="group1" [(ngModel)]="radioForm" value="wistia"label="Wistia" inputId="wistia"></p-radioButton></div>
</div>
<div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
<div *ngIf="radioForm == 'wistia'" >
<p> aqui seu formulario para {{ radioForm }}</p>
</div>
</div>
<div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
<div *ngIf="radioForm == 'imagem'" >
<p> aqui seu formulario para {{ radioForm }}</p>
</div>
</div>
<div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
<div *ngIf="radioForm == 'link'">
<p> aqui seu formulario para {{ radioForm }}</p>
</div>
</div>
<div class="ui-g-6 ui-md-6 ui-lg-6 ui-fluid espacamento-baixo">
<div *ngIf="radioForm == 'video'">
<p> aqui seu formulario para {{ radioForm }}</p>
</div>
</div>
我测试了这两种模式进行验证,但没有成功
ngOnInit() {
//passando um objeto javascript
this.formConteudo = this.formBuilder.group({
titulo: ['', Validators.required],
modalidade: ['', Validators.required],
descricao: ['', Validators.required],
id: ['', Validators.required],
nivel: ['', Validators.required]
});
或者
this.formConteudo = new FormGroup({
titulo: new FormControl({ value: '' }, Validators.compose([Validators.required])),
modalidade: new FormControl({ value: '' }, Validators.compose([Validators.required])),
descricao: new FormControl({ value: '' }, Validators.compose([Validators.required])),
id: new FormControl({ value: '' }, Validators.compose([Validators.required])),
nivel: new FormControl({ value: '' }, Validators.compose([Validators.required]))
});
最佳答案
formControlName 是 ReactiveFormsModule 的 FormGroup 的子级,ngModel 是 FormsModule 的一部分。您尚未在模板中声明存在 formControlName 的 FormGroup。
如果您想跟踪 select 的值,则不需要特定的 FormGroup,只需绑定(bind) select 的值即可。
我简化了你的逻辑并创建了一个 Stackblitz 演示 https://stackblitz.com/edit/angular-smu83a
在那里我获取了选择的值并显示相应的表单。
要了解更多信息,请阅读包含示例的官方文档 https://angular.io/guide/forms-overview
关于angular - 根据具有反应形式的单选按钮更改形式 - Angular 2+,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56243303/