홈>2020-02-26 08:16

angular2 template - 양식으로 검증되지 않은 입력

몇 가지 폼 사이에서 재사용 할 수 있도록 입력 컴포넌트를 만들었습니다. 그 중 하나는 완벽하게 작동하지만 다른 하나는 완벽하게 작동하지 않습니다.

에로스를 던지지 않습니다. 제출 후 입력 값을받습니다.

code.component.html

<div [ngClass]="aplicaCssErro(ag)">
<label for="code">Code</label>
<input id="code" name="code" type="text" class="form-control" [(ngModel)]="value" required #ag="ngModel"
    maxlength="4" minlength="4" (blur)="formatCode(ag)">
<div *ngIf="verificaValidTouched(ag)" class="msgErroText">
    <gce-campo-control-erro [mostrarErro]="ag?.errors?.required" msgErro="the code is required">
    </gce-campo-control-erro>
</div>

code.component.ts

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'gce-input-code',
  templateUrl: './input-code.component.html',
  styleUrls: ['./input-code.component.scss']
})
export class InputCodeComponent implements OnInit {
  @Input() value: string = "";
  constructor() { }
  ngOnInit() {
  }
//some functions
}

form.component.html

문제는 양식이 양식을 확인하지 않고 첫 번째 입력 만하는 것입니다.

양식이 양식을 입력 중 하나로 인식하지 못한다고 생각합니다.

<form (ngSubmit)="onSubmitForm2(f)" #f="ngForm">
<div class="row">
  <div class="col-sm-6" [ngClass]="aplicaCssErro(apelido)">
    <label for="apelido">Apelido da conta</label>
    <input id="apelido" name="apelido" type="text" class="form-control" alt="Apelido" [(ngModel)]="conta.apelido" required #apelido="ngModel">
    <div *ngIf="verificaValidTouched(apelido)" class="msgErroText">
      <gce-campo-control-erro [mostrarErro]="apelido?.errors?.required" msgErro="O Apelido é obrigatório.">
      </gce-campo-control-erro>
    </div>
  </div>
</div>
<div class="row">
   <div class="form-group">
      <div class="col-sm-2">
         <gce-input-code name="code" [(ngModel)]="user.code" #code="ngModel" ngDefaultControl></gce-input-code>
       </div>
   </div>
 </div>
 <div class="row">
   <button class="btn btn-default" name="btn2" type="submit" alt="Continuar" [disabled]="!f.valid">Continue</button>
  </div>

도움이 있습니까?

angular2-templateangular2-forms

답변 # 1

질문을 올바르게 이해하면 양식 (ngForm)이 입력 (gce-input-code)을 감싸는 사용자 정의 구성 요소를 확인할 수 있도록하려고합니다.

일반적인 형태는 Angular 컴포넌트이므로 컴포넌트에 들어오고 나가는 것을 알 수있는 방법이 없습니다. 모든 커넥터 (ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS)를 포함 시키려면 code.component.ts를 향상시켜야합니다.

이 블로그를 확인하십시오 https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html#custom-form-control-considerations

및 plnkr (아래의 실행 코드) https://plnkr.co/edit/6xVdppNQoLcsXGMf7tph?p=info

import { Component, OnInit, forwardRef, Input, OnChanges } from '@angular/core';
    import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } 
    from '@angular/forms';

export function createCounterRangeValidator(maxValue, minValue) {
  return (c: FormControl) => {
    let err = {
      rangeError: {
        given: c.value,
        max: maxValue || 10,
        min: minValue || 0
      }
    };
  return (c.value > +maxValue || c.value < +minValue) ? err: null;
  }
}
@Component({
  selector: 'counter-input',
  template: `
    <button (click)="increase()">+</button> {{counterValue}} <button (click)="decrease()">-</button>
  `,
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterInputComponent), multi: true },
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => CounterInputComponent), multi: true }
  ]
})
export class CounterInputComponent implements ControlValueAccessor, OnChanges {
  propagateChange:any = () => {};
  validateFn:any = () => {};
  @Input('counterValue') _counterValue = 0;
  @Input() counterRangeMax;
  @Input() counterRangeMin;
  get counterValue() {
    return this._counterValue;
  }
  set counterValue(val) {
    this._counterValue = val;
    this.propagateChange(val);
  }
  ngOnChanges(inputs) {
    if (inputs.counterRangeMax || inputs.counterRangeMin) {
      this.validateFn = createCounterRangeValidator(this.counterRangeMax, this.counterRangeMin);
      this.propagateChange(this.counterValue);
    }
  }
  writeValue(value) {
    if (value) {
      this.counterValue = value;
    }
  }
  registerOnChange(fn) {
    this.propagateChange = fn;
  }
  registerOnTouched() {}
  increase() {
    this.counterValue++;
  }
  decrease() {
    this.counterValue--;
  }
  validate(c: FormControl) {
    return this.validateFn(c);
  }
}

이전 excel - 행/범위 위로 이동하지만 특정 행 위로 이동하지 않음

다음 패브릭 - 잘못된 ssh 키를 사용하는 paramiko

Python2.net

angular2 template - 양식으로 검증되지 않은 입력