Question

[（ngModel）]在表单标签中不起作用

当我使用Multi Select Outside Form标签时，可以很好地选择All和取消选择所有功能

但是当我将它放入Form时，它可以选择所有值

<form [formGroup]="roleForm">

    <mat-form-field class="example-full-width">
        <mat-select placeholder="Select Role Type" formControlName="roleType" (selectionChange)="roleTypeSelect($event.value)">
            <mat-option *ngFor="let role of roleTypeList" [value]="role.roleTypeId">
                {{role.roleTypeName}}
            </mat-option>
        </mat-select>
    </mat-form-field> <!-- Multi Select Mat Start -->
    <mat-form-field class="example-full-width">

        <mat-select placeholder="Select Privileges" class="filter-select" [formControl]="selectedItems" [compareWith]="equals" multiple
         #privilegeSelect="ngModel">
            <mat-option disabled="disabled" class="filter-option">
                <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAll(privilegeSelect, dropdownList)">
                    Select All
                </button>
                <button mat-raised-button class="mat-primary fill text-sm eta-margin-all" (click)="deselectAll(privilegeSelect)">
                    Deselect All
                </button>
            </mat-option>
            <mat-option *ngFor="let privilege of dropdownList" [value]="privilege">{{privilege.itemName}}</mat-option>
        </mat-select>

    </mat-form-field>
    <!-- Multi select mat end -->

</form>

Answer 1

如果仅使用<p>而不用ngModel括起来，则不必为输入指定<form>。

name

但是当您以某种形式使用它时，<input ... [(ngModel)]="model.something"`>属性将成为必填项！

name

它实际上在文档中：

在标记中使用ngModel时，还需要提供一个name属性，以便可以使用该名称在父表单中注册控件。

如果您错过它，它将根本不会显示任何错误，它将无法正常工作。

Answer 2

由于您使用的是ngModel，因此删除了formControlName。

我已在 stackblitz

上创建了一个演示

component.ts

roleForm: FormGroup;
constructor(private fb: FormBuilder) {
    this.roleForm = this.fb.group({
      toppings: [null]
    })
}

toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

selectAll() {
    this.roleForm.get('toppings').patchValue(['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'])
}
deselectAll() {
    this.roleForm.get('toppings').patchValue([])
}

component.html

<form [formGroup]="roleForm">
    <mat-form-field class="example-full-width">

        <mat-select  placeholder="Select Privileges" class="filter-select" formControlName="toppings" multiple>
            <mat-option disabled="disabled" class="filter-option">
                <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAll()">
                    Select All
                </button>
                <button mat-raised-button class="mat-primary fill text-sm eta-margin-all" (click)="deselectAll()">
                    Deselect All
                </button>
            </mat-option>
            <mat-option *ngFor="let privilege of toppingList" [value]="privilege">{{privilege}}</mat-option>
        </mat-select>

    </mat-form-field>

<p>Selected Value--{{roleForm.get('toppings').value}}</p>

</form>

ngModel在表单标签中不起作用

2 个答案: