小编Eub*_*per的帖子

我正在尝试使用 Angular Material 和 Angular 6 的第 7 版制作自定义 MatFormFieldControl。自定义输入是一个重量输入，它有一个值（输入类型 =“数字”）和一个单位（选择“kg”，“ G”，...）。它必须放置在 mat-form-field-control 中，使用反应式表单 (formControlName="weight") 并支持错误状态 ( <mat-error *ngIf="weightControl.hasError('required')">error<...>)，甚至使用自定义验证器。

我写了这个实现：

重量-input.component.html

<div [formGroup]="weightForm">
  <input fxFlex formControlName="value" type="number" placeholder="Valore" min="0" #value>
  <select formControlName="unit" [style.color]="getUnselectedColor()" (change)="setUnselected(unit)" #unit>
    <option value="" selected> Unità </option>
    <option *ngFor="let unit of units" style="color: black;">{{ unit }}</option>
  </select>
</div>

重量-input.component.css

.container {
  display: flex;
}

input, select {
  border: none;
  background: none;
  padding: 0;
  opacity: 0;
  outline: none;
  font: inherit;
  transition: 200ms opacity ease-in-out;
}

:host.weight-floating input …

我有这个webpack.config.js：

{
    target: 'node',
    mode: 'production',
    // devtool: 'source-map',
    entry: {
        index: './source/lib/index.ts',
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                include: path.resolve(__dirname, 'source'),
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            compiler: 'ttypescript'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new BundleDeclarationsWebpackPlugin({
            entry: "./source/lib/index.ts",
            outFile: "./index.d.ts"
        })
    ],
    externals: [nodeExternals()],
    output: {
        path: path.resolve(__dirname, 'bundled', 'lib'),
        filename: 'index.js',
        library: 'mongo-cleaner',
        libraryTarget: 'umd',
        globalObject: 'this',
        umdNamedDefine: true,
    }
}

您可以看到我将一个库与 webpack 捆绑在一起，并将 …