我能'；t从文件输入@angular/material组件获取文件名

我无法从文件输入@angular/material组件获取文件名 app.component.html

<div class="col-6">
    <mat-form-field>
      <ngx-mat-file-input [formControl]="fileControl"
                          placeholder="Выберите файл"
      >
        <mat-icon ngxMatFileInputIcon>folder</mat-icon>
      </ngx-mat-file-input>
    </mat-form-field>
</div>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  fileName: string;
  fileControl: FormControl;
  // files: any;
  files: FormControl;
  constructor() {
    this.fileName = '';
    this.fileControl = new FormControl(this.files);
  }

  ngOnInit(): void {
    this.fileControl.valueChanges.subscribe((files: FormControl) => {
      console.log('valueChanges OK ');
      this.files = files;
      console.log('file = ' + this.files.value);
      fileName = this.files.value;    //error!!!
    })
  }
}

如何在此处获取文件名：

fileName = this.files.value  ???

我以这个例子为基础。 我把所有不必要的东西都从那里移走了。我只留下了问题中的代码

在被动形式中使用。 它将返回一个带有“文件”数组的对象

将输入元素包装在表单中

<form *ngIf="fileForm" [formGroup]="fileForm">
     <mat-form-field>
      <ngx-mat-file-input [formControl]="fileControl" placeholder="Выберите файл">
        <mat-icon ngxMatFileInputIcon>folder</mat-icon>
      </ngx-mat-file-input>
    </mat-form-field>
</form>

在反应形式中使用。 它将返回一个带有“文件”数组的对象

将输入元素包装在表单中

<form *ngIf="fileForm" [formGroup]="fileForm">
     <mat-form-field>
      <ngx-mat-file-input [formControl]="fileControl" placeholder="Выберите файл">
        <mat-icon ngxMatFileInputIcon>folder</mat-icon>
      </ngx-mat-file-input>
    </mat-form-field>
</form>

---

我在您的存储库中尝试了此解决方案

app.component.ts文件：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  fileControl: FormControl;
  public file;
  filename = '';

  constructor() {
    this.fileControl = new FormControl(this.file);
  }
  ngOnInit() {
    this.fileControl.valueChanges.subscribe((file: File) => {
      this.file = file;
      this.filename = file.name;
      console.log('fileName = ' + this.filename);
    })
  }
}

<div class="col-6">
    <mat-form-field>
        <ngx-mat-file-input [formControl]="fileControl">
            <mat-icon ngxMatFileInputIcon>folder</mat-icon>
        </ngx-mat-file-input>
    </mat-form-field>
</div>

app.component.html文件：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  fileControl: FormControl;
  public file;
  filename = '';

  constructor() {
    this.fileControl = new FormControl(this.file);
  }
  ngOnInit() {
    this.fileControl.valueChanges.subscribe((file: File) => {
      this.file = file;
      this.filename = file.name;
      console.log('fileName = ' + this.filename);
    })
  }
}

<div class="col-6">
    <mat-form-field>
        <ngx-mat-file-input [formControl]="fileControl">
            <mat-icon ngxMatFileInputIcon>folder</mat-icon>
        </ngx-mat-file-input>
    </mat-form-field>
</div>

文件夹

我在您的存储库中尝试了此解决方案

app.component.ts文件：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  fileControl: FormControl;
  public file;
  filename = '';

  constructor() {
    this.fileControl = new FormControl(this.file);
  }
  ngOnInit() {
    this.fileControl.valueChanges.subscribe((file: File) => {
      this.file = file;
      this.filename = file.name;
      console.log('fileName = ' + this.filename);
    })
  }
}

<div class="col-6">
    <mat-form-field>
        <ngx-mat-file-input [formControl]="fileControl">
            <mat-icon ngxMatFileInputIcon>folder</mat-icon>
        </ngx-mat-file-input>
    </mat-form-field>
</div>

app.component.html文件：

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  fileControl: FormControl;
  public file;
  filename = '';

  constructor() {
    this.fileControl = new FormControl(this.file);
  }
  ngOnInit() {
    this.fileControl.valueChanges.subscribe((file: File) => {
      this.file = file;
      this.filename = file.name;
      console.log('fileName = ' + this.filename);
    })
  }
}

<div class="col-6">
    <mat-form-field>
        <ngx-mat-file-input [formControl]="fileControl">
            <mat-icon ngxMatFileInputIcon>folder</mat-icon>
        </ngx-mat-file-input>
    </mat-form-field>
</div>

文件夹

我在FileInput和this.fileFrom上遇到错误。什么类型的错误？您是否在模块部分注册了ReactiveFormsModule？我添加了一个模型列表。我在FileInput和this.fileFrom上遇到错误。什么类型的错误？您是否在模块部分注册了ReactiveFormsModule？我添加了一个模型列表。它会出现错误“无法读取未定义的属性'forEach'”@Alexerg能否尝试写入console.log（control）；订阅里面？浏览器将写入对象的所有信息，我们可以尝试理解添加的错误，下面是他所写的：File{}proto:File我真的不知道怎么回事，你能给我们ngx mat文件输入的存储库吗？我还修改了我的答案，给出了所有代码我添加了一个到原始示例的链接，在这里它给出了错误“无法读取未定义的属性'forEach'”@alexSerg你能尝试编写console.log（control）吗；订阅里面？浏览器将写入对象的所有信息，我们可以尝试理解添加的错误，下面是他所写的：File{}proto:File我真的不知道怎么回事，你能给我们ngx mat文件输入的存储库吗？我还修改了我的答案，给你所有的代码我添加了一个链接到原来的例子