Question

我将ngClass用于表单，因此我可以根据字段是否有效对其进行着色，当我在本地构建它以进行测试（调试构建）时，网页可以正常工作，表单输入会着色。如果我尝试使用FTP发布网站，则该网站在构建（发行版本）时将失败。我正在从Visual Studio构建网站，因为我正在使用ASP + Angular，但是我对asp标记的问题没有任何运气。

<form [formGroup]="emailForm" (ngSubmit)="onFormSubmit()" [ngClass]="{'form-submitted': formSubmitted}">
// here come form inputs which all highlight correctly on local test build (I can post them if neccessary)
</form>

.ts文件导入

import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

.ts有关表单的代码

 emailForm: FormGroup;
  email: Email;
  emailString: string;

  constructor(private formBuilder: FormBuilder,
    private http: HttpClient,
    @Inject('BASE_URL') private baseUrl: string) { }

  ngOnInit() {
    this.emailForm = this.formBuilder.group({
      senderName: new FormControl('', [Validators.required, Validators.minLength(5)]),
      senderEmail: new FormControl('', [Validators.required, Validators.email]),
      senderSubject: new FormControl('', [Validators.required, Validators.minLength(5)]),
      senderMessage: new FormControl('', [Validators.required, Validators.minLength(5)])
    });
  }

发布时遇到的确切错误是：src \ app \ contact \ contact.component.html（4,63）中的错误：类型'ContactComponent'上不存在属性'formSubmitted'。您是说'onFormSubmit'吗？

Answer 1

您必须在组件类中公开定义属性formSubmitted。

@Component({ ... })
export class ContactComponent {
  formSubmitted = false;
  // ...
}

当用户提交表单时，将执行功能onFormSubmit()。在上面的组件类中实现此功能，然后在此处将formSubmitted属性设置为true。

onFormSubmit() {
  this.formSubmitted = true;
  // ...
}

在您的模板中，您可以通过以下方式应用课程

<form [class.form-submitted]="formSubmitted">

类型“ ContactComponent”上不存在属性“ formSubmitted”

1 个答案: