Reputation: 832

How to create a multiple radio group in angular

How to create a multiple radio where there's a question and you will just choose Passed or Failed. it will not affect the other item when you choosing the passed or failed

for example:

Item 1 - What do you think? you will pass or fail? : *Passed * Failed

Item 2 - Your classmate anna will be pass or fail? : *Passed * Failed

Item 3 - Your best friend grade will be pass or fail? : *Passed * Failed

Upvotes: 1

Answers (5)

Ben Racicot

Reputation: 5934

I'm not sure why all the example I come across are complex.

Here is how radio buttons can be used in an Angular Reactive form in a basic state.

form = <FormGroup>this.formBuilder.group({
  type: this.formBuilder.control({ value: null, disabled: false}
});

HTML view

<form (ngSubmit)="onSubmit()" [formGroup]="form" [ngClass]="{'student': form.value.student}">
  <input type="radio" value="student" formControlName="type" id='student' name='type' />
  <input type="radio" value="professional" formControlName="type" id='professional' name='type' />
  <input type="radio" value="executive" formControlName="type" id='executive' name='type' />

  <button type="submit">
    Get started
  </button>
</form>

Upvotes: 0

Abhishek

Reputation: 1778

Multiple radio group with reactive form.

HTML:

<form [formGroup]="form">
  <div *ngFor="let que of questions">
    <span>{{que.question}}</span>&nbsp;&nbsp;&nbsp;
    <mat-radio-group [formControlName]="que.id" aria-label="Select an option">
      <mat-radio-button value="true">Passed</mat-radio-button>
      <mat-radio-button value="false">Failed</mat-radio-button>
    </mat-radio-group>
  </div>
  <pre>{{form.value | json}}</pre>
</form>

TS:

form: FormGroup;

  questions = [{
    id: "1",
    question: "What do you think? you will pass or fail?",
    result: false
  },
  {
    id: "2",
    question: "Your classmate anna will be pass or fail?",
    result: false
  },
  {
    id: '3', 
    question: "Your best friend grade will be pass or fail?",
    result: false
  }]

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({ });
      this.questions.forEach(question => {
      this.form.addControl(question.id, this.fb.control(null, Validators.required));
      })
  }

stackblitz link : https://stackblitz.com/edit/angular-pyfprq

Upvotes: 0

Himanshu Singh

Reputation: 2165

Item.ts file

class Item{
  id : number;
  question : string;
  isPassed : boolean;
}

app.component.ts

export class AppComponent  {
items : Item[]=[];

 constructor(){
    console.log("onitnit")
    this.items.push({
      'id':1,
      'question': 'question1?',
      'isPassed':false,
    })
    this.items.push({
      'id':2,
      'question': 'question2?',
      'isPassed':false,
    })
    this.items.push({
      'id':3,
      'question': 'question3?',
      'isPassed':false,
    })
  }

  resultHandler(){
    console.log(this.items);
  }
}

app.component.html file

        <div *ngFor = "let item of items" style="display : flex;">
           {{item.question}} 
           <form style="margin-left:20px">
              passed: <input type="radio" name="orders" [value]="item.id"/>
             failed: <input type="radio" name="orders" [value]="item.id"/>
           </form>
        </div>

working demo

See console for final result generated.

Upvotes: 0