>

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

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

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>

도움이 있습니까?


  • 답변 # 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