title: When I select option, radio button's value gets changed as well. I have no clue about this behavior
body: <p>I am trying to add n number of address using reactive form and formArray. My first issue is, how to select only one address as a primary using radio button? Second problem is, when I select option from select-option drop-down, radio button's value gets changed as well.</p>
  
  <p>I already tried changing radio button's value programmatically by adding (change) event binding. </p>
  
  <pre><code>export class AppComponent  {
    public userForm: FormGroup;
    constructor(private _fb: FormBuilder) {
      this.userForm = this._fb.group({
        firstName: [],
        lastName: [],
        address: this._fb.array([this.addAddressGroup()])
      });
    }
  
    private addAddressGroup(): FormGroup {
      return this._fb.group({
        street: [],
        city: [],
        state: [],
        category: ['home'],
        isPrimary: [false, [Validators.required]]
      });
    }
  
    get addressArray(): FormArray {
      return &lt;FormArray&gt;this.userForm.get('address');
    }
  
    addAddress(): void {
      this.addressArray.push(this.addAddressGroup());
    }
  
    onRadioChange(num) {
      this.addressArray.value.forEach((address, index) =&gt; {
        address.isPrimary = num === index;
      });
    }
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div formArrayName="address"&gt;
            &lt;div class="address-container" *ngFor="let group of addressArray.controls; let i = index;"
              [formGroupName]="i"&gt;
              &lt;fieldset&gt;
                &lt;legend&gt;
                  &lt;h3&gt;Address: {{i + 1}}&lt;/h3&gt;
                &lt;/legend&gt;
  
                &lt;mat-form-field&gt;
                  &lt;mat-label&gt;Category&lt;/mat-label&gt;
                  &lt;mat-select
                    formControlName="category"&gt;
                    &lt;mat-option  value="home"&gt;home&lt;/mat-option&gt;
                    &lt;mat-option  value="work"&gt;work&lt;/mat-option&gt;
                  &lt;/mat-select&gt;
                &lt;/mat-form-field&gt;
                &lt;br&gt;
  
                &lt;mat-radio-group
                  formControlName="isPrimary"
                  name="isPrimary"&gt;
                  &lt;mat-radio-button
                    [value]="true"
                    class="example-radio-button"
                    (change)="onRadioChange(i)"&gt;
                    Primary
                  &lt;/mat-radio-button&gt;
                &lt;/mat-radio-group&gt;
  
                &lt;div&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="Street" formControlName="street"&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="City" formControlName="city"&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field&gt;
                    &lt;input matInput placeholder="State" formControlName="state"&gt;
                  &lt;/mat-form-field&gt;
                &lt;/div&gt;
  
              &lt;/fieldset&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-row org-desc-parent-margin"&gt;
            &lt;button mat-raised-button (click)="addAddress()"&gt;Add more address&lt;/button&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>How to reproduce: 
  1) Add another address
  2) Select new address as Primary
  3) Change value of select-option menu of first address
  4) This will change radio button's value from false to true.</p>
  
  <p>I would really appreciate the help. Thanks in advance.</p>