在Angular中无法将class绑定到Formgroup

Question

我有一个用户注册页面，我试图在angular中使用formgroup将user类映射到html，但无法读取该类的属性，我已经添加了angular html，组件。t和下面的类。我错过了什么

register.component.html

<div class="col-md-7" [formGroup]="userForm">
<h3>User Registration</h3>
<br>

<div class="form-group">
<label for="input-username">Username</label>
<input type="text" pInputText placeholder="Username" [(ngModel)]="user.userName" id="loginUsername"
name="loginUsername" class="form-control">
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group required">
<label class="control-label" for="firstName">First Name</label>
<input type="text" pInputText placeholder="First Name" [(ngModel)]="user.firstName" id="firstName" name="firstName"
class="form-control">
</div>
</div>
<div class="col-sm-6">
<div class="form-group required">
<label class="control-label" for="lastName">Last Name</label>
<input type="text" pInputText placeholder="Last Name" [(ngModel)]="user.lastName" id="lastName" name="lastName"
class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="input-email">E-Mail</label>
<input type="text" pInputText placeholder="Email Address" [(ngModel)]="user.email" id="email" name="email"
class="form-control">
</div>
<div class="form-group required">
<label class="control-label" for="input-country">Country</label>
<p-dropdown [options]="countries" id="input-country" [(ngModel)]="selectedCountry" optionLabel="name"
optionValue="code" placeholder="Select a Country"></p-dropdown>
</div>
<div class="form-group">
<label for="input-password">Password</label>
<p-password [(ngModel)]="user.password" [toggleMask]="true" id="input-password" name="loginpassword" class="form-control"></p-password>

</div>
<div class="form-group">
<label for="input-password">Repeat Password</label>
<p-password [(ngModel)]="user.passConfirm" [toggleMask]="true" id="input-password" name="passConfirm" class="form-control"></p-password>

</div>
<div id="button-register" class="form-group">
<button type="submit" class="btn btn-primary"
disabled="disabled" (click)="registerUser()">Register</button>
</div>
<input type="hidden" name="redirect" value="">

</div>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/api/selectitem';
import {HttpClient} from '@angular/common/http'
import { User } from '../models/user';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms'
interface Country {
name: string,
code: string
}
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
public userForm : FormGroup| any;
countries: Country[] = [];
data = [];
user: User|any;
selectedCountry: Country|any;
constructor(private readonly formBuilder: FormBuilder) { }
ngOnInit(): void {

fetch('./assets/commonfiles/countries.json').then(res => res.json())
.then(jsonData => {
this.countries = jsonData;
});
this.initFormGroups();
}
public registerUser(){
}
initFormGroups(){
this.userForm = this.formBuilder.group({user:new FormControl(this.user,[Validators.required])});
}
}

User.ts

export class User {
public userName: string | any;
public password: string | any;
public email: string | any;
public firstName: string | any;
public lastName: string | any;
public country: string | any;
public passConfirm: string | any;
}

app.module.ts

import { FormsModule,ReactiveFormsModule } from '@angular/forms';
imports: [
BrowserModule,
AppRoutingModule,
CalendarModule,
FormsModule,
BrowserAnimationsModule,
ImageModule,
SocialLoginModule,
DropdownModule,
PasswordModule,
ReactiveFormsModule
]

Answer 1

在component.html文件

<form [formGroup]="userForm">
<div>
<mat-label>Username</mat-label>
<input formControlName="username" matInput type="text">
</div>
<div>
<mat-label>First Name </mat-label>
<input formControlName="firstName" matInput type="text">
</div>
.....

在.ts文件

userForm!: FormGroup;
constructor(private readonly _formBuilder: FormBuilder) {
this.userForm = this._formBuilder.group({
username: new FormControl(null, [Validators.required, Validators.min(5)]),
firstName: new FormControl(null, [Validators.required]),
....
})
}