반응성 양식

Question

취소에 내가 취소하고 제출 버튼이 반응 양식이 유효성 검사를 건너 뛰

<button (click)="cancel($event)" type="button" class="ui button">Cancel</button> 
<button [disabled]="..." type="submit" class="ui button primary">Store</button> 

와 지금은에 제출 (저장) 버튼을 검증 차기를 클릭하면 - 모든 좋은. 그러나 취소를 클릭하면 유효성 검사가 트리거됩니다. 왜 그런지 궁금해? 취소시 유효성 검사가 필요하지 않습니다. 사용 중지하려면 어떻게해야합니까?

Answer 1

Cancel 버튼을 클릭하면 FormGroup이 다시 초기화됩니다. 이렇게하면 폼이 완전히 지워지고 모든 입력 상태가 다시 시작됩니다. 입력 상태를 사용하여 사용 여부를 확인해야합니다 (아직 입력하지 않은 경우). 아직 사용되지 않은 양식 입력에서 유효성 검증이 실행되지 않도록합니다.

구성 요소

constructor() { 
    this.Form = initForm(); 
} 

initForm() { 
    return this._FormBuilder.group({ 
     fieldOne: ['', Validators.required] 
    }) 
} 

입력

<div class="ui input" [class.error]="Form.get('fieldOne').dirty && !Form.get('fieldOne').valid"> 
    <input type="text" placeholder="Search..." formControlName="fieldOne"> 
</div> 

버튼

<button (click)="initForm()" type="button" class="ui button">Cancel</button> 

P.S. 시맨틱 UI를 사용하는 것처럼 보입니다. 따라서 HTML이 적절하게 형식화됩니다. 그렇지 않다면 약간 재 작업해야합니다.

Answer 2

취소 버튼을 클릭 할 때 formGroup 부모의 formControl을 '재설정'하면됩니다.

cancel() { 
this.form.reset(); 
}