如果在表单标签中使用 ngModel,则必须设置 name 属性
If ngModel is used within a form tag, either the name attribute must be set
所以我有一个页面,我将在其中创建新用户,并且我正在尝试添加指定该用户将属于哪个组的功能。我在 onSubmit 函数中将代码标记为粗体,这样您就可以看到,这段代码将检查检查了哪个组,并将为此新用途设置成员资格。因此,为了让我的应用程序能够知道检查了哪个组,我在 html [(ngModel)]="item.Selected"
中使用了数据绑定并将该段代码标记为粗体,以便您可以找到它。但它不起作用并抛出一个错误,我已将其附加为屏幕截图。谢谢!
<div class="tab">
<h2>Add New User</h2>
<form (ngSubmit)="onSubmit(addNewUserForm)" #addNewUserForm="ngForm" [hidden]="Error!=null">
<mat-card>
<div class="form-group">
<label for="name"><b>Name</b></label>
<div>
<input autocomplete="off" type="text" id="name" required [(ngModel)]="user.name" name="name"
#name="ngModel">
<div [hidden]="name.valid" class="alert alert-danger">Name is required</div>
</div>
</div>
<div class="form-group">
<label for="password"><b>Password</b></label>
<div>
<input type="password" id="password" [(ngModel)]="user.password" name="password"
#password="ngModel">
<div [hidden]="!passwordEmpty(addNewUserForm)" class="alert alert-warning">Blank password is not
recommended</div>
</div>
</div>
<div class="form-group">
<label for="password2"><b>Retype Password</b></label>
<div>
<input type="password" id="password2" [(ngModel)]="user.password2" name="password2"
#password2="ngModel">
<div [hidden]="passMatch(addNewUserForm)" class="alert alert-danger">Password does not match</div>
</div>
</div>
<div class="form-group-groups">
<label><b>Select group</b></label>
</div>
<mat-form-field style="min-width: 290px; margin-left: 1em;">
<mat-select multiple>
**<mat-option *ngFor="let item of items" [(ngModel)]="item.Selected">{{item.Name}}</mat-option>**
</mat-select>
</mat-form-field>
</mat-card>
<mat-card>
<button mat-raised-button class="lspace" [disabled]="!formValid(addNewUserForm)">Add</button>
<button mat-raised-button class="lspace" (click)="onCancel()">Cancel</button>
</mat-card>
</form>
<div>
<p class="error" *ngIf="Error != null">{{Error}}</p>
</div>
</div>
export class UserDetails {
name: string;
password: string;
password2: string;
}
export module Model {
export class GroupItem {
constructor(group: Group) {
this.Name = group.Name;
this.Selected;
}
readonly Name: string;
Selected: boolean;
}
}
@Component({
selector: 'new-user',
templateUrl: './user-new.component.html',
styleUrls: ['./user-new.component.css'],
})
export class NewUserComponent extends BaseComponent implements OnInit {
user: UserDetails;
Groups: Group[];
items: Model.GroupItem[];
constructor(appData: AppData, private userService: UsersService, logonService: LogonService, private location: Location, private groupService: GroupsService) {
super(appData, logonService);
this.user = new UserDetails();
}
protected onToken(token: string): void {
this.fetchGroups(token);
}
private fetchGroups(token: string): void {
this.groupService.getGroups(token).subscribe(
groups => { this.buildItems(groups) },
(err: any) => { this.showError(err) }
);
}
private buildItems(groups: Group[]): void {
this.items = new Array<Model.GroupItem>(groups.length);
for(let i=0; i < groups.length; ++i) {
this.items[i] = new Model.GroupItem(groups[i]);
}
}
ngOnInit() {
super.ngOnInit();
document.getElementById('name').focus();
}
onCancel(): void {
super.ngOnInit();
this.location.back();
}
passMatch(form: NgForm): boolean {
let p1 = (form.value.password == null) ? '' : form.value.password;
let p2 = (form.value.password2 == null) ? '' : form.value.password2;
return (p1 == p2);
}
formValid(form: NgForm): boolean {
return form.valid && this.passMatch(form);
}
passwordEmpty(form: NgForm): boolean {
return (form.value.password == null) || (form.value.password.length == 0);
}
onSubmit(form: NgForm): void {
if (this.Token == null || this.Token == '') {
console.error('Token is not valid.');
return;
}
**var groups: string[] = this.items.filter(itm => itm.Selected).map(itm => itm.Name);
this.userService.setMembership(this.Token, this.user.name, groups).subscribe(
() => { this.location.back(); this.appData.setDirty(); },
(err: any) => { this.showError(err) }
);**
//
let pass = (this.user.password == '') ? null : this.user.password;
this.userService.addUser(this.Token, this.user.name, pass).subscribe(
(_: string) => { this.location.back(); this.appData.setDirty(); },
(err: any) => { this.showError(err); }
);
}
}
My app with error that I get
您的 mat-select
上没有 name
属性,您使用 mat-select 的方式似乎有点不对。您的模型可能应该在 mat-select
上,但我必须看看您的 items 对象是什么样子的。虽然我相信你想要更接近这个的东西:
<mat-select multiple [(ngModel)]="selectedItem">
**<mat-option *ngFor="let item of items" [value]="item.id">{{item.Name}}</mat-option>**
</mat-select>
所以我有一个页面,我将在其中创建新用户,并且我正在尝试添加指定该用户将属于哪个组的功能。我在 onSubmit 函数中将代码标记为粗体,这样您就可以看到,这段代码将检查检查了哪个组,并将为此新用途设置成员资格。因此,为了让我的应用程序能够知道检查了哪个组,我在 html [(ngModel)]="item.Selected"
中使用了数据绑定并将该段代码标记为粗体,以便您可以找到它。但它不起作用并抛出一个错误,我已将其附加为屏幕截图。谢谢!
<div class="tab">
<h2>Add New User</h2>
<form (ngSubmit)="onSubmit(addNewUserForm)" #addNewUserForm="ngForm" [hidden]="Error!=null">
<mat-card>
<div class="form-group">
<label for="name"><b>Name</b></label>
<div>
<input autocomplete="off" type="text" id="name" required [(ngModel)]="user.name" name="name"
#name="ngModel">
<div [hidden]="name.valid" class="alert alert-danger">Name is required</div>
</div>
</div>
<div class="form-group">
<label for="password"><b>Password</b></label>
<div>
<input type="password" id="password" [(ngModel)]="user.password" name="password"
#password="ngModel">
<div [hidden]="!passwordEmpty(addNewUserForm)" class="alert alert-warning">Blank password is not
recommended</div>
</div>
</div>
<div class="form-group">
<label for="password2"><b>Retype Password</b></label>
<div>
<input type="password" id="password2" [(ngModel)]="user.password2" name="password2"
#password2="ngModel">
<div [hidden]="passMatch(addNewUserForm)" class="alert alert-danger">Password does not match</div>
</div>
</div>
<div class="form-group-groups">
<label><b>Select group</b></label>
</div>
<mat-form-field style="min-width: 290px; margin-left: 1em;">
<mat-select multiple>
**<mat-option *ngFor="let item of items" [(ngModel)]="item.Selected">{{item.Name}}</mat-option>**
</mat-select>
</mat-form-field>
</mat-card>
<mat-card>
<button mat-raised-button class="lspace" [disabled]="!formValid(addNewUserForm)">Add</button>
<button mat-raised-button class="lspace" (click)="onCancel()">Cancel</button>
</mat-card>
</form>
<div>
<p class="error" *ngIf="Error != null">{{Error}}</p>
</div>
</div>
export class UserDetails {
name: string;
password: string;
password2: string;
}
export module Model {
export class GroupItem {
constructor(group: Group) {
this.Name = group.Name;
this.Selected;
}
readonly Name: string;
Selected: boolean;
}
}
@Component({
selector: 'new-user',
templateUrl: './user-new.component.html',
styleUrls: ['./user-new.component.css'],
})
export class NewUserComponent extends BaseComponent implements OnInit {
user: UserDetails;
Groups: Group[];
items: Model.GroupItem[];
constructor(appData: AppData, private userService: UsersService, logonService: LogonService, private location: Location, private groupService: GroupsService) {
super(appData, logonService);
this.user = new UserDetails();
}
protected onToken(token: string): void {
this.fetchGroups(token);
}
private fetchGroups(token: string): void {
this.groupService.getGroups(token).subscribe(
groups => { this.buildItems(groups) },
(err: any) => { this.showError(err) }
);
}
private buildItems(groups: Group[]): void {
this.items = new Array<Model.GroupItem>(groups.length);
for(let i=0; i < groups.length; ++i) {
this.items[i] = new Model.GroupItem(groups[i]);
}
}
ngOnInit() {
super.ngOnInit();
document.getElementById('name').focus();
}
onCancel(): void {
super.ngOnInit();
this.location.back();
}
passMatch(form: NgForm): boolean {
let p1 = (form.value.password == null) ? '' : form.value.password;
let p2 = (form.value.password2 == null) ? '' : form.value.password2;
return (p1 == p2);
}
formValid(form: NgForm): boolean {
return form.valid && this.passMatch(form);
}
passwordEmpty(form: NgForm): boolean {
return (form.value.password == null) || (form.value.password.length == 0);
}
onSubmit(form: NgForm): void {
if (this.Token == null || this.Token == '') {
console.error('Token is not valid.');
return;
}
**var groups: string[] = this.items.filter(itm => itm.Selected).map(itm => itm.Name);
this.userService.setMembership(this.Token, this.user.name, groups).subscribe(
() => { this.location.back(); this.appData.setDirty(); },
(err: any) => { this.showError(err) }
);**
//
let pass = (this.user.password == '') ? null : this.user.password;
this.userService.addUser(this.Token, this.user.name, pass).subscribe(
(_: string) => { this.location.back(); this.appData.setDirty(); },
(err: any) => { this.showError(err); }
);
}
}
My app with error that I get
您的 mat-select
上没有 name
属性,您使用 mat-select 的方式似乎有点不对。您的模型可能应该在 mat-select
上,但我必须看看您的 items 对象是什么样子的。虽然我相信你想要更接近这个的东西:
<mat-select multiple [(ngModel)]="selectedItem">
**<mat-option *ngFor="let item of items" [value]="item.id">{{item.Name}}</mat-option>**
</mat-select>