我一直在学习一个教程，其中包含一个发布到.net核心api的angluar注册表单。我已经测试了.net核心api，这是一种工作形式。但由于某种原因，我的角度形式似乎从未得到验证。当我绕过验证时，传递给API的值总是空白的。
我的html表单是
<style type="text/css">
div.form-group.required>label:first-child:after {
content:"*";
padding-left:5px;
color:red;
}
</style>
<div class="row mt-4">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<h1>User registration</h1>
<p>user registration <strong>with some</strong> strong txt (ctrl shift p)(wrap with abbriev) hit enter type strong hit enter</p>
</div>
</div>
</div>
<div class="col-md-6">
<form [formGroup]="service.formModel" autocomplete="off" (submit)="onSubmit()">
<!-- copy form-group div and press alt shift and either up or down arrow -->
<div class="form-group required">
<label for="">Username</label>
<input class="form-control" formConntrolName="UserName">
<label class="text-danger" *ngIf="service.formModel.get('UserName').touched && service.formModel.get('UserName').errors?.required">This is a required field</label>
</div>
<div class="form-group">
<label for="">Email</label>
<input class="form-control" formConntrolName="Email">
<label class="text-danger" *ngIf="service.formModel.get('Email').touched && service.formModel.get('Email').errors?.required">This is a required field</label>
</div>
<div class="form-group">
<label for="">FullName</label>
<input class="form-control" formConntrolName="FullName">
<label class="text-danger" *ngIf="service.formModel.get('FullName').touched && service.formModel.get('FullName').errors?.required">This is a required field</label>
</div>
<div formGroupName="Passwords">
<div class="form-group">
<label for="">Password</label>
<input class="form-control" formConntrolName="Password">
<label class="text-danger" *ngIf="service.formModel.get('Passwords.Password').touched && service.formModel.get('Passwords.Password').errors?.required">This is a required field</label>
<label class="text-danger" *ngIf="service.formModel.get('Passwords.Password').touched && service.formModel.get('Passwords.Password').errors?.minlength">min 8 characters</label>
</div>
<div class="form-group">
<label for="">ConfirmPassword</label>
<input class="form-control" formConntrolName="ConfirmPassword">
<label class="text-danger" *ngIf="service.formModel.get('Passwords.ConfirmPassword').touched && service.formModel.get('Passwords.ConfirmPassword').errors?.required">This field is mandatory.</label>
<label class="text-danger" *ngIf="service.formModel.get('Passwords.ConfirmPassword').touched && service.formModel.get('Passwords.ConfirmPassword').errors?.passwordMismatch">Confirm Password does not match.</label>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-8">
<button type="submit" class="btn btn-lg btn-block" [disabled]="!service.formModel.valid">Sign up</button>
</div>
</div>
</form>
</div>
</div>
我的ts代码是
import { UserService } from './../../shared/user.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styles: []
})
export class RegistrationComponent implements OnInit {
constructor(public service: UserService) { }
ngOnInit() {
this.service.formModel.reset();
}
onSubmit() {
console.log('frm val: ' + this.service.formModel.value.UserName);
this.service.register().subscribe(
(res: any) => {
if (res.succeeded) {
this.service.formModel.reset();
console.log('New user created! Registration successful.')
} else {
res.errors.forEach(element => {
switch (element.code) {
case 'DuplicateUserName':
//console.log('Username is already taken','Registration failed.');
break;
default:
console.log(element.description + ' Registration failed.');
break;
}
});
}
},
err => {
console.log(err);
}
);
}
}
最后我的user.service.ts代码是
import { Injectable } from '@angular/core';
import { FormBuilder, Validators, FormGroup } from '@angular/forms';
//import { variable } from '@angular/compiler/src/output/output_ast';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private fb:FormBuilder,private http:HttpClient) { }
readonly BaseUri = 'http://localhost:52044/api';
formModel = this.fb.group({
UserName : ['',Validators.required],
Email : ['',[Validators.required,Validators.email]],
FullName : ['',Validators.required],
Passwords : this.fb.group({
Password : ['',[Validators.required,Validators.minLength(8)]],
ConfirmPassword : ['',Validators.required]
},{validator: this.comparePasswords})
});
comparePasswords(fb: FormGroup) {
let confirmPswrdCtrl = fb.get('ConfirmPassword');
console.log('psws: ' + fb.get('Password').value);
if (confirmPswrdCtrl.errors == null || 'passwordMismatch' in confirmPswrdCtrl.errors) {
if (fb.get('Password').value != confirmPswrdCtrl.value)
confirmPswrdCtrl.setErrors({ passwordMismatch: true });
else
confirmPswrdCtrl.setErrors(null);
}
}
register() {
// to change both instances of something eg the word FullName highlight the first and press
//ctrl and d then when you change one instance it will change both
var body = {
UserName: this.formModel.value.UserName,
Email: this.formModel.value.Email,
FullName: this.formModel.value.FullName,
Password: this.formModel.value.Passwords.Password
}
// var body = {
// UserName: 'usernametest',
// Email: 'username@blar.com',
// FullName: 'blar di blar',
// Password: 'abc1234'
// }
console.log('username : ' + this.formModel.value.UserName);
return this.http.post(this.BaseUri + '/applicationuser/register', body);
}
}
当我在浏览器中检查username元素时，这就是
<div _ngcontent-gtd-c1="" class="form-group required">
<label _ngcontent-gtd-c1="" for="">Username</label>
<input _ngcontent-gtd-c1="" class="form-control" formconntrolname="UserName">
<!--bindings={
"ng-reflect-ng-if": "false"
}-->
</div>
"bindings={"位正确吗？
有人能告诉我出了什么问题吗？其次，给我一些建议，告诉我如何自己调试它？
感谢
尝试使用以下方法进行验证：
<label *ngIf="service.formModel.hasError('required', 'UserName')">
UserName required.
</label>