angular - matInput 值未更新
问题描述
我有一个这样的用户名和密码的表单输入字段,
<mat-form-field class="mdb-form-field-modal form-adjustments">
<input (keydown)="emailBtnFocus($event)" tabindex="0" matInput placeholder="username" formControlName="username">
<mat-error *ngIf="username.hasError('email') && !username.hasError('required')">
{{ signInEmailErrorText }}
</mat-error>
<mat-error *ngIf="username.hasError('required')">
{{requiredError }}
</mat-error>
</mat-form-field>
export class SignInComponent implements OnInit {
signInForm: FormGroup;
username = new FormControl('', [
Validators.required, Validators.email
]);
ngOnInit() {
this.authState = this.store.select('auth');
this.signInForm = new FormGroup({
'username': this.username,
'password': this.password,
'staySignedIn': this.staySignedIn
});
}
// Submit Logic.
onSignInSubmit() {
console.log('SignInForm:', this.signInForm);
//logic for submit goes here
}
}
解决方案
做这个:
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class SignInComponent implements OnInit {
signInForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.authState = this.store.select('auth');
this.signInForm = this.formBuilder.group({({
'username': ['', [Validators.required, Validators.email]],
'password': ['', Validators.required],
'staySignedIn': ['']
});
}
// Submit Logic.
onSignInSubmit() {
console.log('SignInForm:', this.signInForm);
//logic for submit goes here
}
}
推荐阅读
- mysql - mongoDB 聚合查询与 MySQl 查询
- c++ - 防止 char 输入到 int 变量中并在多次出现时输出单个警告消息
- woocommerce - 如何在 woocommerce 描述下添加评论选项卡
- python - 从多个标签中提取文本时忽略子标签的问题
- hibernate - Hibernate 可以处理复合类型中的重叠列吗?
- c - 将两个指向同一个联合成员的指针传递给函数是否违反了严格的别名规则?
- regex - RegEx 强制执行典型的 Forename 格式
- javascript - 将数组中的树转换为使用 React Flow 和 Dagre 显示
- ios - 如何显示文本取决于 SwiftUI 中的 switch case?
- solana - 索拉纳主播:如何及时转发?