홈>
몇 가지 폼 사이에서 재사용 할 수 있도록 입력 컴포넌트를 만들었습니다. 그 중 하나는 완벽하게 작동하지만 다른 하나는 완벽하게 작동하지 않습니다.
에로스를 던지지 않습니다. 제출 후 입력 값을받습니다.
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