Почему сбрасывается состояние mat-radio-button при открытии сразу нескольких одинаковых форм?

Question

[Auratos]

Добрый день. Я использую Angular 9 и mat-radio-button. Я заполняю паспорт пользователя данными с сервера и сделал выбор radio-button сразу на основе этих данных при помощи двусторонней привязки. Radio-button проставляется сразу, все хорошо. Но если я открываю рядом еще один паспорт пользователя, то на форме первого паспорта выбор radio-button сбрасывается, т.е. ни один radio-button не выбран. Если выбираю на первой форме, то сбрасывается на второй. Все остальные данные при этом сохраняются. И в модели все данные тоже остаются. При клике по radio-button данные в модели обновляются. Подскажите, пожалуйста, в чем может быть проблема?

user.component.html

<mat-radio-group aria-label="Пол" [(ngModel)]="user.gender.id" name="gender">
    <mat-radio-button [value]=1>Муж.</mat-radio-button>
    <mat-radio-button [value]=2>Жен.</mat-radio-button>
</mat-radio-group>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../service/user.service';
import { User } from '../../models/user/user';
import { Data } from '../../../home/home.component';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  public user: User;

  constructor(data: Data, private userService: UserService) {
    if (data != undefined) {
      this.user = data as unknown as User;
      this.Get(this.user.id);
    }
    else {
      this.user = new User();
    }
  }

  ngOnInit(): void {
  }

  private Get(id: number) {
    this.userService.Get(id).subscribe(
      data => { this.user = (data as any).user as User; }
    );
  }
}

user.ts

import { Gender } from "../doctors/Gender";
export class User {
  public id: number;
  public name: string;
  public surname: string;
  public patronymic: string;
  public gender: Gender;
  public login: string;
  public passwordHash: string;
  public birthday: Date;
  public employmentDateInAlpha: Date;
  constructor() {
    this.id = 0;
    this.name = '';
    this.surname = '';
    this.patronymic = '';
    this.gender = new Gender();
    this.login = '';
    this.passwordHash = '';
    this.birthday = new Date();
    this.employmentDateInAlpha = new Date();
  }
}

gender.ts

export class Gender {
  public id: number;
  public name: string;

  constructor() {
    this.id = 3;
    this.name = 'Не задан';
  }
}

Answer 1

[Auratos]

Ответ на вопрос нашел сам. У меня <mat-radio-group> был внутри

<mat-card>
  <form class="example-form">
     ...
  </form>
</mat-card>

Я <form> заменил на <mat-card-content> и убрал name="gender" из <mat-radio-group>, и только после этого привязка заработала и состояние radio-button перестало сбрасываться. Я и не думал, что в этом может быть проблема.