Question

<form (submit)="false"    #loginForm2="ngForm" >
  <mat-form-field  >
    <input
      #emailField="ngModel" name="emailField" email [(ngModel)]="loginData.email" matInput
      placeholder="Enter your email" required value="">
    <span matPrefix><mat-icon>email</mat-icon></span>

  </mat-form-field>

  {{loginData|json}}



</form>

如果使用ng serve --aot构建，一切都按预期工作。

但是，如果添加--prod，则在键入时不会更新loginData输出。 loginForm2和emailField是有效对象，但只是没有正确输出loginData。

我已经多次检查过，但无法找到错误。

浏览器控制台没有错误。

使用角度5.1.3和材料5.0.3

==============

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class AppLoginComponent {
  showPassword: boolean = false;

  loginData: any = {

  };

  constructor(
    private readonly router: Router,
    private readonly loginService: LoginService,
  ) {
  }
  ... other code ...
}

Answer 1

您可以尝试在email对象中声明loginData属性吗？顺便说一句，您不必添加public属性，它应该已经公开了！您也不必添加any类型。

loginData = {
    email: ''
}

Answer 2

好吧我认为这是uglify-js的问题。

请参阅https://github.com/webpack-contrib/uglifyjs-webpack-plugin/pull/199

https://github.com/angular/angular-cli/issues/8997

我升级了底层的uglify-es，现在一切都很好。

我没有详细研究这个问题。

使用--prod标志在实时服务器上未更新表单数据

2 个答案: