Question

我正在尝试在我的应用程序中使用表单验证指令。它创建一个表单，并为我在模板中使用的各个字段设置验证要求。我无法确定如何以对我的组件可用的方式导入它。我有模块导入它并将其添加到导入数组。我还需要将指令导入组件本身吗？

指令：

import { Directive } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Directive({
  selector: '[appCarriersValidation]'
})
export class CarriersValidationDirective {

  addCarrierForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.createForm();
  }
  createForm() {
    this.addCarrierForm = this.fb.group({
      Name: ['', Validators.required],
      ...
    })
  }
}

模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { CarriersRoutingModule } from './carriers-routing.module';
import { CarriersListingComponent } from './carriers-listing/carriers-listing.component';
import { AddCarriersComponent } from './add-carriers/add-carriers.component';
import { EditCarriersComponent } from './edit-carriers/edit-carriers.component';
import { CarriersValidationDirective } from './carriers-validation.directive';


@NgModule({
  declarations: [CarriersListingComponent, AddCarriersComponent, EditCarriersComponent, CarriersValidationDirective],
  imports: [
    CommonModule,
    CarriersRoutingModule,
    NgbModule,
    AngularMultiSelectModule,
    FormsModule,
    ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
  ]
})
export class CarriersModule { }

组件：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-add-carriers',
  templateUrl: './add-carriers.component.html',
  styleUrls: ['./add-carriers.component.scss']
})
export class AddCarriersComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

导入Angular 2指令并在组件中使用

0 个答案: