我无法在输入类型上动态分配值：radio / Angular

Question

我很迷失，我正在尝试根据网址动态构建表单的模板，但由于某种原因我无法在单选类型输入上设置属性值。

form-cake html

<form [formGroup]="formCake" (ngSubmit)="onSubmit()">
  <ng-container *ngFor="let template of formTemplate">

    <label for="{{template.id}}">{{template.label}}: </label>
    
     <input id="{{template.id}}" 
     type="{{template.type}}" 
     [name]="template.name"  
     [formControlName]="template.name" 
     [attr.value]="(template.type === 'radio') ? template.value: null">
  
  </ng-container>

形成蛋糕组件

ngOnInit(): void {

    this.formCake = this.formService.formControllerSetup();
    this.formTemplate = this.formService.formHtmlSetup();

表单服务

formControllerSetup(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required],
      description: ['', [Validators.required]],
      image: ['', Validators.required],
      price: [+'', Validators.required],
      cakeType: [null, Validators.required],
      allergies: this.fb.group({
        cereal: [false],
        nuts: [false],
        eggs: [false],
        milk: [false],
        soy: [false],
        peanuts: [false],
        sulfite: [false],
        // ... Ajoute d'autres allergies ici
      })
    });
  }


  formHtmlSetup() {

    let fields!: any[];
    return fields = [
      { type: 'text',id: 'name',name: 'name', label: 'Name', validation: { required: true } },
      { type: 'text',id: 'description', name: 'description', label: 'Description', validation: { required: true } },
      { type: 'text',id: 'image', name: 'image', label: 'Image', validation: { required: true } },
      { type: 'number',id: 'price', name: 'price', label: 'Price', validation: { required: true } },
      { type: 'radio',id: 'pm', name: 'cakeType', label: 'Pm', validation: { required: true } },
      { type: 'radio',id: 'pie', name: 'cakeType', label: 'Pie', validation: { required: true } },

    ]
  }

我正在服务内构建模板，将其注入到组件内，然后在 formTemplate 上循环以获取 HTML 中的所有字段。

     <input id="{{template.id}}" 
     type="{{template.type}}" 
     [name]="template.name"  
     [formControlName]="template.name" 
     [attr.value]="template.id">

我确实尝试过

[value]="template.id"/ value="{{template.id}}"

但只有这个版本可以工作

[attr.value]="template.id"

。知道原来有一个三元

[attr.value]="(template.type === 'radio') ? template.id: null"

过滤其他字段。

但是像这样，我可以看到其他输入正在更新，但无线电类型没有更新。

也许我累了，但不知道该往哪里看。

Answer 1

恐怕您无法使用 FormControlName 将类型单选和值动态分配给输入。我认为你唯一能做到的就是使用两个 *ngIf （一个用于输入类型无线电，另一个用于其余）

<form [formGroup]="formCake">
  <ng-container *ngFor="let template of formTemplate">
    <label for="{{template.id}}">{{template.label}}: </label>

    <input
      *ngIf="template.type==='radio'"
      [id]="template.id"
      type="radio"
      [name]="'_'+template.name"
      [value]="template.type == 'radio' ? template.id: null"
      [formControlName]="template.name"
    />
    <input
      *ngIf="template.type!=='radio'"
      id="{{template.id}}"
      [type]="template.type"
      [name]="'_'+template.name"
      [value]="template.type == 'radio' ? template.id: null"
      [formControlName]="template.name"
    />
  </ng-container>
</form>