Angular 将焦点更改为角度6中的表格
我正在Angular 将焦点更改为角度6中的表格,angular,typescript,angular6,Angular,Typescript,Angular6,我正在angular中创建一个crud应用程序。我希望用户名是唯一的，如果用户名不唯一，我希望抛出一个错误，然后将光标放在用户名字段。我可以抛出错误并通知用户，但无法将焦点更改为用户名字段 提前谢谢你的帮助 下面是我的打字脚本代码： export class AdduserComponent implements OnInit { constructor( private formBuilder: FormBuilder, private userService: User
angularcrud应用程序。我希望用户名是唯一的，如果用户名不唯一，我希望抛出一个错误
，然后将光标
放在用户名字段。我可以抛出错误
并通知用户，但无法将焦点
更改为用户名字段
提前谢谢你的帮助
下面是我的打字脚本代码：
export class AdduserComponent implements OnInit {
constructor(
private formBuilder: FormBuilder,
private userService: UsersService,
private router: Router,
private snackBar: MatSnackBar
) { }
addForm: FormGroup;
passwordsMatcher = new RepeatPasswordEStateMatcher;
ngOnInit() {
this.addForm = this.formBuilder.group({
id: [],
userName: ['', Validators.required],
password: new FormControl('', [Validators.required]),
passwordAgain: new FormControl('', [Validators.required]),
userRole: ['', Validators.required],
}, { validator: RepeatPasswordValidator });
}
onSubmit() {
if (this.addForm.valid) {
this.userService.createUser(this.addForm.value)
.subscribe(data => {
console.log(data);
this.snackBar.open("New User Created", "Success", {
duration: 1000,
});
setTimeout(
function () {
window.location.reload();
}, 2000);
//this.router.navigate(['adduser']);
}, error => {
console.log(error);
this.snackBar.open("Username Already Exists", "Please Provide Different UserName", {
duration: 2000,
});
this.addForm.controls.userName.reset();
});
}
//window.location.reload();
}
changeClient(value) { }
resetForm() {
console.log("Reset called");
this.addForm.reset();
}
}
<div style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" >
<mat-toolbar class="toolbar">
<span class="span">Create New NI User</span>
</mat-toolbar>
<mat-card class="card">
<mat-card-content>
<form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()">
<div class="form-group">
<mat-form-field class="example-full-width">
<mat-icon matSuffix > person_identity</mat-icon>
<input matInput type="text" formControlName="userName" placeholder="UserName" name="userName" class="form-control" id="userName">
<mat-error *ngIf="addForm.controls.userName.hasError('required')" >UserName can't be empty</mat-error>
</mat-form-field>
</div>
<p></p>
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput [type]="!hide ? 'password' : 'text'" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
</mat-form-field>
</div>
<p></p>
<div class="form-field">
<mat-form-field>
<input matInput formControlName="passwordAgain" placeholder="Confirm password" [type]="!hides ? 'password' : 'text'" [errorStateMatcher]="passwordsMatcher">
<mat-icon matSuffix (click)="hides = !hides">{{hides ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="addForm.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
</mat-form-field>
</div>
<p></p>
<mat-form-field>
<mat-icon matSuffix>accessibility</mat-icon>
<mat-select placeholder="User Role" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" >
<mat-option value="Admin">Admin</mat-option>
</mat-select>
</mat-form-field>
<div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center">
<button mat-raised-button class="bt" color="primary">Create</button>
<button mat-raised-button type="reset" (click)= "resetForm()" color="warn">Cancel</button>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
下面是html代码：
export class AdduserComponent implements OnInit {
constructor(
private formBuilder: FormBuilder,
private userService: UsersService,
private router: Router,
private snackBar: MatSnackBar
) { }
addForm: FormGroup;
passwordsMatcher = new RepeatPasswordEStateMatcher;
ngOnInit() {
this.addForm = this.formBuilder.group({
id: [],
userName: ['', Validators.required],
password: new FormControl('', [Validators.required]),
passwordAgain: new FormControl('', [Validators.required]),
userRole: ['', Validators.required],
}, { validator: RepeatPasswordValidator });
}
onSubmit() {
if (this.addForm.valid) {
this.userService.createUser(this.addForm.value)
.subscribe(data => {
console.log(data);
this.snackBar.open("New User Created", "Success", {
duration: 1000,
});
setTimeout(
function () {
window.location.reload();
}, 2000);
//this.router.navigate(['adduser']);
}, error => {
console.log(error);
this.snackBar.open("Username Already Exists", "Please Provide Different UserName", {
duration: 2000,
});
this.addForm.controls.userName.reset();
});
}
//window.location.reload();
}
changeClient(value) { }
resetForm() {
console.log("Reset called");
this.addForm.reset();
}
}
<div style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" >
<mat-toolbar class="toolbar">
<span class="span">Create New NI User</span>
</mat-toolbar>
<mat-card class="card">
<mat-card-content>
<form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()">
<div class="form-group">
<mat-form-field class="example-full-width">
<mat-icon matSuffix > person_identity</mat-icon>
<input matInput type="text" formControlName="userName" placeholder="UserName" name="userName" class="form-control" id="userName">
<mat-error *ngIf="addForm.controls.userName.hasError('required')" >UserName can't be empty</mat-error>
</mat-form-field>
</div>
<p></p>
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput [type]="!hide ? 'password' : 'text'" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
</mat-form-field>
</div>
<p></p>
<div class="form-field">
<mat-form-field>
<input matInput formControlName="passwordAgain" placeholder="Confirm password" [type]="!hides ? 'password' : 'text'" [errorStateMatcher]="passwordsMatcher">
<mat-icon matSuffix (click)="hides = !hides">{{hides ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="addForm.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
</mat-form-field>
</div>
<p></p>
<mat-form-field>
<mat-icon matSuffix>accessibility</mat-icon>
<mat-select placeholder="User Role" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" >
<mat-option value="Admin">Admin</mat-option>
</mat-select>
</mat-form-field>
<div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center">
<button mat-raised-button class="bt" color="primary">Create</button>
<button mat-raised-button type="reset" (click)= "resetForm()" color="warn">Cancel</button>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
创建新的NI用户
个人身份
用户名不能为空
{{隐藏？'visibility'：'visibility_off'}
密码不能为空
{{隐藏？'visibility'：'visibility_off'}
密码是不同的。他们应该平等！
可达性
管理
创造
取消
您可以调用HTMLInputElement
的focus（）
方法。为此，请在输入上放置一个引用，例如#username
，然后使用ViewChild（'username'）
在代码中读取：
添加相关的HTML代码使用
向HTML字段添加“引用”。然后，在您的组件中，添加一个指向它的ViewChild
，然后在其上使用.nativeElement.focus（）
来触发焦点。@PrashantPimpale添加了html代码。@briosheje您能举个例子吗？可能重复的