根据具有反应形式的单选按钮更改形式 - Angular 2+

Question

我有3个单选按钮，当我点击每一个时应该出现不同的形式。但是我遇到了反应形式与 formcontrol

冲突的问题

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

Answer 1

formControlName 是 ReactiveFormsModule 的 FormGroup 部分的子项，而 ngModel 是 FormsModule 的一部分。您尚未在模板中声明存在 formControlName 的 FormGroup。

如果要跟踪 select 的值，则不需要特定的 FormGroup，只需绑定 select.

的值即可

我稍微简化了您的逻辑并创建了一个 Stackblitz 演示 https://stackblitz.com/edit/angular-smu83a

我正在获取 select 的值并显示相应的表格。

要了解更多信息，请阅读包含示例的官方文档 https://angular.io/guide/forms-overview

根据具有反应形式的单选按钮更改形式 - Angular 2+

Change form depending on radio button with reactive forms - Angular 2+

typescript

primeng

angular

angular-reactive-forms