无法使用#input 将输入值从视图传递到组件

Question

我在 html 中有以下组件，我只是尝试将输入值传递给该组件：

<mat-accordion class="example-headers-align">
    <mat-expansion-panel [expanded]="expanded" hideToggle>
      <mat-form-field *ngIf="expanded">
        <input #empName matInput type="text" formControlName="empName"/>
      </mat-form-field>
    </mat-expansion-panel>
      <button *ngIf="expanded" mat-button (click)="add(empName.value)">Add</button>
    </div>
</mat-accordion>

但是，组件方法中的值未定义，即使我尝试传递 empName 而不是 empName.value，参数也未定义。那么，这种方法有什么错误呢？如何在不使用 [(ngModel)] 的情况下传递输入值？

add(data) { // data --> undefined
  this.add.emit(data)
}

我还在 <button *ngIf="expanded" mat-button (click)="add(empName.value)">Add</button> 上收到“无法读取未定义的属性 'value'”错误。

Answer 1

在你的 html 文件中

<mat-accordion class="example-headers-align">
        <mat-expansion-panel [expanded]="expanded" hideToggle>
          <mat-form-field *ngIf="expanded">
            <input matInput type="text" [formControl]="empName"/>
          </mat-form-field>
        </mat-expansion-panel>
          <button *ngIf="expanded" mat-button (click)="add()">Add</button>
        </div>
    </mat-accordion>

在你的 ts 文件中

empName = new FormControl('');

add() { // remove the parameter
  // this.add.emit(data), try if it is working first
     console.log(this.empName);
}

希望对您有所帮助。

编码愉快！

Answer 2

您正在使用 formControlName 反应式表单，因此如果您想访问此字段的值，则必须从 formGroup 表单对象访问它。

像这样：

employeeForm: FormGroup;

以及您可以这样访问的表单字段的值：

employeeForm.value.empName

所以在你的函数中尝试像这样传递值：

<button *ngIf="expanded" mat-button (click)="add(employeeForm.value.empName)">Add</button>

Answer 3

说明

你所做的是完全有效的，但你没有考虑模板变量的范围。

使用结构指令创建 scopes/boundaries，它阻止了这些变量的使用，如您所见：https://angular.io/guide/template-reference-variables#template-variable-scope

因此，要以您希望的方式解决您的问题，您需要处理您的模板并删除 *ngIfs

的使用

部分解决方案

以下只是省略了 *ngIfs 的代码可以像您期望的那样工作 （自然这不是一个完整的解决方案，因为您的组件没有 *ngIfs只是表现与你想要的不同):

<div>
    <mat-accordion class="example-headers-align">
        <mat-expansion-panel [expanded]="false" hideToggle>
            <mat-form-field>
                <input #empName matInput type="text" formControlName="empName" >
      </mat-form-field>
        </mat-expansion-panel>
        <button mat-button (click)="add(empName.value)">Add</button>
    </mat-accordion>
</div>

您可以在这个 stackblitz 项目中查看：https://stackblitz.com/edit/angular-ivy-c64ppz?file=src/app/app.component.html（请忽略 material 组件上的控制台错误，这些不是这里的重点:P）

可能的解决方案

可以在最小程度上更改您的代码但允许您保留您的实现的一件事可能是避免 *ngIfs 但通过 css 隐藏元素，如下所示:

模板：

<div>
    <mat-accordion class="example-headers-align">
        <mat-expansion-panel [expanded]="expended" hideToggle>
            <mat-form-field [ngClass]="{'hidden': !expanded}">
                <input #empName matInput type="text" formControlName="empName" >
      </mat-form-field>
        </mat-expansion-panel>
        <button [ngClass]="{'hidden': !expanded}" mat-button (click)="add(empName.value)">Add</button>
    </mat-accordion>
</div>

css:

.hidden {
  display: none;
}

这里又是一个 stackblitz，您可以在其中看到它的工作原理：https://stackblitz.com/edit/angular-ivy-iamrut?file=src/app/app.component.html

无法使用#input 将输入值从视图传递到组件

Cannot pass input value from view to component using #input

typescript

angular-material

angular

angular-reactive-forms

说明

部分解决方案

可能的解决方案