html - 如果在表单标签中使用 ngModel，则必须设置 name 属性

Question

所以我有一个页面，我将在其中创建新用户，并且我正在尝试添加指定该用户所属组的功能。我在 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); }
        );
    }
}

我的应用程序出现错误

标签： htmlangulartypescriptangular-ngmodelform-control

Answer 1

你没有任何name属性，mat-select而且你使用 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>