export class RegistrationComponent implements OnInit {
registerForm: FormGroup;
bool:boolean = false;
constructor(private formBuilder: FormBuilder) {
this.registerForm = this.formBuilder.group({
name:['',[Validators.required,Validators.minLength(2),Validators.maxLength(15)]],
firstName:['',[Validators.required,Validators.minLength(2),Validators.maxLength(15)]],
email:['', [Validators.required,Validators.email]],
telephone:['',[Validators.required,Validators.pattern("[0-9]{9}")]],
mobilePhone:['',[Validators.pattern("[0-9]{10}")]],
type:['',Validators.required],
checkbox:[],
companyName:['',[Validators.minLength(2),Validators.maxLength(30)]],
rizivNumber:['',Validators.pattern("[0-9]{8}")],
taxNumber:['',Validators.pattern("[A-Z]{2}[0-9]*")],
streetName:['', Validators.required],
houseNumber:['',[Validators.required,Validators.pattern("[0-9]{1,5}")]],
bus:['',Validators.pattern("[0-9]*")],
zipCode:['',[Validators.required,Validators.pattern("[0-9]{4}")]],
place:['',[Validators.required,Validators.minLength(2),Validators.maxLength(30)]],
fstreetName:[''],
fhouseNumber:['',Validators.pattern("[0-9]*")],
fbus:['',Validators.pattern("[0-9]*")],
fzipCode:['',Validators.pattern("[0-9]{4}")],
fplace:[''],
privacy:['',[Validators.requiredTrue]]
})
this.formControlValueChanged();
}
public onFormSubmit() {
if(this.registerForm.valid) {
let user = new NewCustomer();
user = this.registerForm.value;
console.log(user)
/* Any API call logic via services goes here */
}
}
ngOnInit() {
}
formControlValueChanged() {
this.registerForm.get('checkbox').valueChanges.subscribe(
(mode: string) => {
this.updateForm();
});
}
getClass(text:string){
var input = this.registerForm.get(text);
if(input.invalid && input.touched){
return "input-group has-error"
}else{
return "input-group";
}
}
}
这是我的html代码：
<form [formGroup]="registerForm" (ngSubmit)="onFormSubmit()">
<div class="container-fluid">
<h3>Account informatie</h3>
<div class="row">
<div class="col-md-6">
<div [ngClass]="getClass('name')">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" formControlName="name" placeholder="Achternaam*">
</div>
<div [ngClass]="getClass('firstName')">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" formControlName="firstName" placeholder="Voornaam*">
</div>
<div [ngClass]="getClass('email')">
<span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="email" class="form-control" formControlName="email" placeholder="Email*">
</div>
</div>
<div class="col-md-6">
<div [ngClass]="getClass('telephone')">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="tel" class="form-control" formControlName="telephone" placeholder="Telefoon*">
</div>
<div [ngClass]="getClass('mobilePhone')">
<span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="tel" class="form-control" formControlName="mobilePhone" placeholder="GSM">
</div>
<div [ngClass]="getClass('type')">
<label for="sel1">Type klant:</label>
<select value="type klant" class="form-control" formControlName="type" >
<option>Particulier</option>
<option>Zorgprofessional met RIZIV-nummer</option>
<option>Zorgvoorziening</option>
<option>Andere professional</option>
</select>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<h3>Bedrijfsgegevens</h3>
<div class="row">
<div class="col-md-6">
<div [ngClass]="getClass('companyName')">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" formControlName="companyName" placeholder="Bedrijfsnaam">
</div>
<div [ngClass]="getClass('rizivNumber')">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="number" class="form-control"formControlName="rizivNumber" placeholder="RIZIV-nummer">
</div>
<div [ngClass]="getClass('taxNumber')">
<span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
<input type="text" class="form-control" formControlName="taxNumber" placeholder="BTW-nummer">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<h3>Afleveradres</h3>
<div class="row">
<div class="col-md-6">
<div [ngClass]="getClass('streetName')">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input type="text" class="form-control" formControlName="streetName" placeholder="Straatnaam*">
</div>
<div [ngClass]="getClass('houseNumber')">
<span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
<input type="number" class="form-control" formControlName="houseNumber" placeholder="Huisnummer*">
</div>
<div [ngClass]="getClass('bus')">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="text" class="form-control" formControlName="bus" placeholder="Bus">
</div>
</div>
<div class="col-md-6">
<div [ngClass]="getClass('zipCode')">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="number" class="form-control" formControlName="zipCode" placeholder="Postcode*">
</div>
<div [ngClass]="getClass('place')">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="text" class="form-control" formControlName="place" placeholder="Plaats*">
</div>
</div>
</div>
</div>
<div class="container-fluid" *ngIf="bool">
<h3>Facturatie adres</h3>
<div class="row">
<div class="col-md-6">
<div [ngClass]="getClass('fstreetName')">
<span class="input-group-addon"><i class="glyphicon glyphicon-road"></i></span>
<input type="text" class="form-control" formControlName="fstreetName" placeholder="Straatnaam*">
</div>
<div [ngClass]="getClass('fhouseNumber')">
<span class="input-group-addon"><i class="glyphicon glyphicon-sound-5-1"></i></span>
<input type="number" class="form-control" formControlName="fhouseNumber" placeholder="Huisnummer*">
</div>
<div [ngClass]="getClass('fbus')">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="text" class="form-control" formControlName="fbus" placeholder="Bus">
</div>
</div>
<div class="col-md-6">
<div [ngClass]="getClass('fzipCode')">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="number" class="form-control" formControlName="fzipCode" placeholder="Postcode*">
</div>
<div [ngClass]="getClass('fplace')">
<span class="input-group-addon"><i class="glyphicon glyphicon-inbox"></i></span>
<input type="text" class="form-control" formControlName="fplace" placeholder="Plaats*">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<input type="checkbox" formControlName="checkbox" name="">Facturatie adres is verschillend van afleveradres<br>
</div>
<div [ngClass]="getClass('privacy')">
<input type="checkbox" formControlName="privacy" name="">Ik accepteer de <a href="https://www.caredeal.be/wp-content/uploads/2018/08/HL_Algemene-Verkoopsvoorwaarden_010818.pdf">algemene voorwaarden</a> en heb de <a href="https://www.caredeal.be/wp-content/uploads/2018/07/Privacy-Notification_NL_250718.pdf">privacy disclaimer</a> gelezen.<br>
</div>
<div class="input-group">
<button type="submit" [disabled] = "!registerForm.valid" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</form>
我也想强制转换表格的类：
export class NewCustomer {
//Account information
name:string;
firstName:String;
email:String;
phonenumber:string;
mobilePhone:string;
typeCustomer:Type;
customTypeCustomer:string;
//Company information
companyName:String;
rizivNumber:number;
taxNumber:String;
//Delivery adres
streetName:string;
houseNumber:string;
bus:string;
zipCode:string;
place:string;
//Facturation adres
fStreetName:string;
fHouseNumber:string;
fBus:string;
fZipCode:string;
fPlace:string;
}
答案 0 :(得分：1)
let user = new NewCustomer();
user = this.registerForm.value;
通过这样做，您实际上擦除了NewCustomer对象：将表单的值分配给变量将对一个普通对象的内存引用更改：这是一个包含表单值的无类型对象。
如果要将表单应用于NewCustomer对象，建议您这样做：
let user = new NewCustomer();
// Applies only existing keys in NewCustomer
Object.keys(this.registerForm.value)
.forEach(key => key in NewCustomer? user[key] = this.registerForm.value[key] : null);
// Applies all keys, even the ones not existing in NewCustomer
Object.keys(this.registerForm.value)
.forEach(key => user[key] = this.registerForm.value[key] : null)