Question

在将值分配给HTML / TS文件中的特定表单时遇到错误。我做错了什么？只是尝试将值从mat-下拉列表中分配给一个表单组，然后取值并执行X。或者我要从下拉列表中取该值的最佳方法是什么？

<!-- Potential leads modal -->
<ng-template #dialogMatSelect id="potential-leads-modal" [formGroup]="form">
    <h2 mat-dialog-title id="modal-title">Assign Leads</h2>
    <h3 id="modal-sub-title">Assign {{ totalLeadsSelected }} SmartrCalc 
   Lead<span *ngIf="totalLeadsSelected > 1">s</span> to an adviser. 
</h3>
    <mat-select class="advisers-dropdown" placeholder="Select an adviser" formControlName="AdviserId">
        <mat-option *ngFor="let adviser of advisers" [value]="adviser.NodeId">
            {{ adviser.Name }}
        </mat-option>
    </mat-select>
    <div class="buttons-potential-lead" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px" fxLayoutGap.xs="0">
        <button mat-raised-button type="button" color="primary" class="adviser-toggle-button" id="cancel-button" fxFlex fxFlexOffset="0px">
            Cancel
        </button>
        <button mat-raised-button type="button" color="primary" class="adviser-toggle-button" fxFlex="200px" (click)="assignPotentialLeads()">
            Assign Leads
        </button>
    </div>
</ng-template>

我的TS文件是

export class PotentialLeadsComponent extends SmartrComponent implements OnInit {

    constructor(private fb: FormBuilder, ) {super();}

    potentialLeads: SmartrCalcLead[] = [];

    potentialSelectedLeads: number[];
    form: FormGroup;

    @ViewChild('dialogMatSelect') dialogMatSelect: any;

    ngOnInit() {

        this.form = this.fb.group({
            AdviserId: null,
            SelectedLeads: null
        });
    }


    get totalLeadsSelected(): number {
        return this.potentialLeads.filter(lead => lead.IsSelected ===
            true).length;
    }

    private getAllAdvisers() {
        this.adviserTreeService.fetchAllAdvisersInCompanyAsTree()
            .pipe(takeUntil(this.ngUnsubscribe$))
            .subscribe(data => {
                this.advisers = data.Advisers;
            });
    }


    assignPotentialLeads() {
        if (this.form.valid) {
            const adviserId = this.form.get('AdviserId').value;
            this.potentialLeads.forEach(function (val) {
                if (val.IsSelected === true) {
                    this.potentialSelectedLeads.push(val);
                }
            });

            this.smartrCalcService.putLeads(adviserId,
                this.potentialSelectedLeads);
        }
    }
}

Answer 1

_{代表OP发布}

出现该错误的原因是因为我们无法将表单组与ng-template一起使用。 ng模板未在DOM中呈现，因此出现错误。因此，我必须将所有内容包装在div中。像<ng-template>-> <div formGroup>一样，一切都像一个符咒。

无法在ng-template中使用FormGroup

1 个答案: