正在验证用户输入Angular

Question

我第一次使用Angular表单。我正在尝试创建一个表单来验证输入。我看不出该怎么办。我得到错误"类型RegisterComponent上不存在属性名称"。我觉得我错过了什么，但所有的教程都只显示了这一点。这是我的代码：

<div class="container">
<h1>Register</h1>
<p>Fill in all the fields to register</p>
<hr>
<form ng-app="app" name="registerForm">
<div class="form-group">
<label for="firstName">Name</label>
<input id="name" type="text" class="form-control" name="name" ngModel required minlength="3" maxlength="30">
<div *ngIf="name.$invalid && (name.touched || name.dirty)" class="alert alert-danger"></div>
</div>

Answer 1

某些属性值未正确绑定。请尝试此代码一次。

Html:

<form [formGroup]="registerForm">
<div class="form-group">
<label for="firstName">firstName</label>
<input formControllerName="firstName" type="text" maxlength="255" class="form-control" formControlName="firstName" id="firstName" [ngClass]="{'is-invalid': firstName.invalid && firstName.dirty}"/>
<div class="invalid-feedback">
firstName is required
</div>
</div>
</form>

TS代码：

registerForm: FormGroup;
ngOnInit() {
this.registerForm = this.formBuilder.group({
firstName: [this.registerForm.firstName, Validators.compose([Validators.required, Validators.maxLength(255)])],
});
}
get firstName() { return this.registerForm.get('firstName'); }
var firsNameObtained = this.firstName.value;//on form submit