在這里，我有簡單的形式
<form [formGroup]="loginform">
<input type="text" formControlName="EmailId"/>
<input type="text" formControlName="password"/>
<button [disabled]="!loginform.valid" (click)="ValidateUser()"></button>
<form>
我的 Ts 代碼為 loginform!:FormGroup; 我在這里提到了我的驗證
ngOnInit(): void {
this.loginform=this.fb.group({
EmailId:['',[Validators.required]],
password:['',[Validators.required]
})
}
Geing 價值觀為
get f(): { [key: string]: AbstractControl } {
return this.loginform.controls;
}
這是我的界面
export interface logindetails{
EmailId:string;
password:string;
}
在我提交的
ValidateUser(objuser:logindetails){
}
從我的 HTML 到這里如何將值系結到我的界面？
uj5u.com熱心網友回復：
您可以簡單地將這些添加到您的.ts檔案中：
onEmailIdChanged(event:any){
this.EmailId = event.target.value;
}
onPasswordChanged(event:any){
this.password = event.target.value;
}
并在你.HTML這樣做：
<input type="text" formControlName="EmailId" (change)="onEmailIdChanged($event)/>
<input type="text" formControlName="password" (change)="onPasswordChanged($event)/>
uj5u.com熱心網友回復：
我假設你想要強型別的反應形式
宣告介面
interface ILoginForm {
EmailId: string;
password: string;
}
// Interface IUserFormGroup extends FormGroup {
loginForm: ILoginForm;
// We need to add these manually again, same fields as ILoginForm
controls: {
EmailId: AbstractControl;
password: AbstractControl;
};
}
初始化表單構建器組
form: ILoginForm;
constructor(private formBuilder: FormBuilder) {
// initialize the form
this.form = this.formBuilder.group({
EmailId:['',[Validators.required]],
password:['',[Validators.required]
}) as ILoginForm; // make sure to double-check this list with the interface
}
const loginData: ILoginForm = this.form.value; // this is now valid typescript
ValidateUser(){
const loginData: ILoginForm = this.form.value; // this is now valid typescript
console.log(`Login data ${loginData.EmailId}`);
}
更高級和通用的解決方案Angular 強型別反應形式
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/408152.html
標籤：
上一篇：http-server無法為我的Angular應用程式提供服務
下一篇：角度設定測驗奇怪的輸出