当我添加到component.ts时，html消失了

问题描述

我正在尝试为我的角度应用程序建立联系表格。我正在使用此链接作为指南https://mdbootstrap.com/docs/angular/forms/contact/#docsTabsOverview。 HTML可以正常工作，但是一旦我将此代码添加到项目中，联系表单就会消失：

import { ConnectionService } from './connection.service';
import { FormGroup,FormBuilder,Validators } from '@angular/forms';
import { Component,HostListener } from '@angular/core';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss'],})
export class AppComponent {

contactForm: FormGroup;
disabledSubmitButton: boolean = true;
optionsSelect: Array<any>;

  @HostListener('input') oninput() {

  if (this.contactForm.valid) {
    this.disabledSubmitButton = false;
    }
  }

  constructor(private fb: FormBuilder,private connectionService: ConnectionService) {

  this.contactForm = fb.group({
    'contactFormName': ['',Validators.required],'contactFormEmail': ['',Validators.compose([Validators.required,Validators.email])],'contactFormSubjects': ['','contactFormMessage': ['','contactFormcopy': [''],});
  }

  onSubmit() {
    this.connectionService.sendMessage(this.contactForm.value).subscribe(() => {
      alert('Your message has been sent.');
      this.contactForm.reset();
      this.disabledSubmitButton = true;
    },error => {
      console.log('Error',error);
    });
  }

  }

有什么想法吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）