Как получить доступ к проверке формы в пользовательском компоненте angular 4 - PullRequest
Новая
       18

Как получить доступ к проверке формы в пользовательском компоненте angular 4

0 голосов
/ 13 июня 2018

У меня есть пользовательский компонент для моей формы: app-form

@Component({
  selector: "app-form",
  template: `
  <form (ngSubmit)="onSubmit()">
      <div class="row">
        <ng-content></ng-content>
      </div>
      <button type="submit">Save</button>
  </form>
  `,
  animations,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: FormComponent,
      multi: true
    }
  ]
})

, и у меня есть пользовательский компонент для моих входов: app-form-text

@Component({
  selector: "app-form-text",
  template: `
  <div class="form-group"
      [class.has-success]="nameval.valid && (nameval.dirty || nameval.touched)"
      [class.has-danger]="nameval.invalid && (nameval.dirty || nameval.touched)">
      
      <input type="text" class="form-control"
        [class.form-control-success]="nameval.valid"
        [class.form-control-danger]="nameval.invalid && nameval.dirty"
        #nameval="ngModel" [name]="nameval"  maxlength="250" minlength="2" [(ngModel)]="value"
        required [appNmsValidators]='ValidationType'>
        <div *ngIf="nameval.errors && (nameval.dirty || nameval.touched)">
          <p *ngIf="nameval.errors.required">{{ReqErMsg}}</p>
          <p *ngIf="nameval.errors.minlength">{{MinErMsg}}</p>
          <p *ngIf="nameval.errors.appNmsValidators">{{Cu1ErMsg}}</p>
        </div>
      <small class="form-text text-muted"></small>
  </div>
  `,
  animations,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: FormTextComponent,
      multi: true
    }
  ]
})

Я использую их следующим образом: 

<app-form [FormName]="'BaseCodeForm'">
    <div class="col-md-6">
      <app-form-text required name="typeCode"   
        [(ngModel)]="BaseCodeModel.typeCode">
      </app-form-text>
    </div>
    <div class="col-md-6">
      <app-form-text required name="descCode" 
        [(ngModel)]="BaseCodeModel.descCode">
      </app-form-text>
    </div>
  </app-form>

как я могу получить доступ к проверке формы в компоненте приложения?

1 Ответ

0 голосов
/ 13 июня 2018

В компоненте формы приложения вы должны попытаться внедрить экземпляр NgForm, используя @ ViewChild 

@ViewChild(NgForm) form: NgForm;

Он должен быть доступен в методе ngOnInit ()

...