Question

我正在使用以下结构构建一个有角度的应用程序。

--app
    --shared(module)
        --validation-message(component)
    --core(module)
        --user
            --create(component)
    --security(module)
        --login(component)

在validation-message组件中，我有显示表单验证消息的模板。我在create模块的core组件中成功添加了表单验证。但是我必须在core.module.ts文件中添加以下行

import { ValidationMessagesComponent } from '<path>';

，然后在declarations和exports 中添加了该组件。

然后将CoreModule导入到app.module.ts文件中。我之所以这样添加，是因为无法将ValidationMessagesComponent添加到AppModule。

现在，我需要将验证添加到LoginComponent。但是我无法将ValidationMessagesComponent添加到SecurityModule中。它显示错误ValidationMessagesComponent已经在两个模块CoreModule和SecurityModule中。

如何使ValidationMessageComponent与LoginComponent一起使用？

验证组件如下所示

validation-message.component.ts

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ValidationService } from '../../core/services/validation/validation.service';
@Component({
  selector: 'app-errorMessages',
  template: `<div *ngIf="errorMessage !== null">{{errorMessage | translate}}</div>`
})
export class ValidationMessagesComponent {

  @Input() control: FormControl;

  constructor() { }

  /**
   * Function to get the form validation error message
   *
   * @readonly
   * @memberof ValidationMessagesComponent
   */
  get errorMessage() {
    for (const propertyName in this.control.errors) {
      if (this.control.errors.hasOwnProperty(propertyName) && this.control.touched) {
        return ValidationService.getValidatorErrorMessage(propertyName, this.control.errors[propertyName]);
      }
    }
    return null;
  }
}

login.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../services/auth/auth.service';
import { Router } from '@angular/router';
import { LocalStorageService } from 'src/app/core/services/storage/local-storage.service';

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

@Input() control: FormControl;

export class LoginComponent {
  username: string;
  password: string;
  title = 'Login';
  loginForm: FormGroup;
  login = {
    username: '',
    password: ''
  };
  submitted = false;
  constructor(
    private authService: AuthService,
    private router: Router,
    private localStorage: LocalStorageService
  ) {
    this.createForm();
  }

  createForm(): void {
    this.loginForm = new FormGroup({
      username: new FormControl(this.login.username, [
        Validators.required
      ]),
      password: new FormControl(this.login.password, Validators.required)
    });
  }

  onSubmit(): any {
  }
}

在“ login.component.html”中，我在提交的用户名下方添加了一行

<app-errorMessages [control]="loginForm.controls.userName" class="error-msg messages text-left text-danger"></app-errorMessages>

我在这里遇到错误

未捕获的错误：模板解析错误：无法绑定到“控件”，因为它不是“ app-errorMessages”的已知属性。 1.如果“ app-errorMessages”是一个Angular组件，并且具有“ control”输入，则确认它是该模块的一部分。 2.如果“ app-errorMessages”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 3.要允许任何属性，请在此组件的'@ NgModule.schemas'中添加'NO_ERRORS_SCHEMA'

我在做什么错？请帮忙。我没有任何线索，一直呆在这里。

无法将验证组件添加到表单组件。显示错误无法绑定到“控件”，因为它不是“ app-errorMessages”的已知属性

0 个答案: