Angular - 如何绑定到嵌套在子组件中两层深处的单选按钮的输入值？

Question

I have a set of radio buttons that I've made into a component and its parent is a form which is also a component. The parent form consists of a name field, an email field, and a set of three radio button questions.

parent-form.component.ts

@Component({
    selector: 'parent-form',
    template: `
        <form #myform="ngForm" (ngSubmit)="save(myform)">
            <label>Name</label>
            <input type="text" id="name" name="name" [(ngModel)]="name" />

            <label>Email</label>
            <input type="text" id="email" name="email" [(ngModel)]="email" />

            <label>Radio Question 1</label>
            <radio-buttons [radioText]="radioButtonsText[0]" [radioId]="0"></radio-buttons>

            <label>Radio Question 2</label>
            <radio-buttons [radioText]="radioButtonsText[1]" [radioId]="1"></radio-buttons>

            <label>Radio Question 3</label>
            <radio-buttons [radioText]="radioButtonsText[2]" [radioId]="2"></radio-buttons>
        </form>
    `
})
export class ParentFormComponent implement OnInit {
   name: string = "";
   email: string = "";
   radioSelection1: number = 0;
   radioSelection2: number = 0;
   radioSelection3: number = 0;

   radioButtonText = [
       ['Very Bad', 'Bad', 'Neutral', 'Good', 'Very Good'],
       ['None', 'A Little', 'Somewhat', 'Often', 'Frequent'],
       ['Very Worried', 'A bit worried', 'Neutral', 'generally not worried', 'not worried at all']
   ];

   ngOnInit() {}

   save(form: NgForm) {
       console.log(form.value);
   }
}

radio-buttons.component.ts

@Component({
    selector: 'radio-buttons',
    template: `
        <div>
            <label>
                <input type="radio" name="radio + {{ radioId }}" id="option1" value="0" />
                {{ radioText[0] }}
            </label

            <label>
                <input type="radio" name="radio + {{ radioId }}" id="option2" value="1" />
                {{ radioText[1] }}
            </label

            <label>
                <input type="radio" name="radio + {{ radioId }}" id="option3" value="2" />
                {{ radioText[2] }}
            </label

            <label>
                <input type="radio" name="radio + {{ radioId }}" id="option4" value="3" />
                {{ radioText[3] }}
            </label

            <label>
                <input type="radio" name="radio + {{ radioId }}" id="option5" value="4" />
                {{ radioText[4] }}
            </label
        </div>
    `
})
export class RadioButtonComponent {
    @Input() radioText = [];
    @Input() radioId = '';
    constructor() {}
}

Now my question is at the ParentFormComponent level, how do "access" the clicked value of each set of radio buttons? I tried putting [(ngModel)]="radioSelection1" on the radio-button tag and on the input tag of the RadioButtonComponent but neither of them work.

I want to be able to get the values of each of selected answer of the radio buttons and pass that on to my backend for saving.

Answer 1

One approach would be to use ControlValueAccessor .

You could check out these articles on this topic:

• Never again be confused when implementing ControlValueAccessor in Angular forms

• A thorough exploration of Angular Forms

Another approach would be to leverage the viewProviders option.

For example:

parent.component.html

<form #f="ngForm">
  <input ngModel name="test" type="text">

  <app-radio-buttons ctrlName="radioCtrl"></app-radio-buttons>
</form>

<p>
  Form values: {{ f.value | json }}
</p>

radio-buttons.component.ts

@Component({
  selector: 'app-radio-buttons',
  templateUrl: './radio-buttons.component.html',
  styleUrls: ['./radio-buttons.component.css'],
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: NgForm,
    }
  ]
})
export class RadioButtonsComponent implements OnInit {
  @Input() ctrlName: string;
}

radio-buttons.component.html

<h3>radio btn component</h3>

value1: <input ngModel [name]="ctrlName" type="radio" value="1">
value2: <input ngModel [name]="ctrlName" type="radio" value="2">

<!-- Setting a default value -->
value3: <input ngModel="3" [name]="ctrlName" type="radio" value="3">

You can follow the same pattern when working with Reactive Forms , but you'll have to change NgForm to FormGroupDirective .

This solution is based on how viewProviders works together with the @Host decorator.

For instance, this is how the NgModel directive's constructor looks like:

constructor(
    @Optional() @Host() parent: ControlContainer,
    /* ... */
  ) {
  super();
  this._parent = parent;
  /* ... */
}

Quoted from Angular: Nested template driven form

Host decorator gives us the opportunity to get a provider from viewProviders declared for host element

The host element in this case is the <form> element:

export const formDirectiveProvider: any = {
  provide: ControlContainer,
  useExisting: forwardRef(() => NgForm)
};

@Directive({
  selector: 'form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]',
  providers: [formDirectiveProvider],
  host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
  outputs: ['ngSubmit'],
  exportAs: 'ngForm'
}) { /* ... */ }

Source .

As you can see, we have the ControlContainer , which can be accessed in viewProviders .

ng-run demo .