Angular2 - 외부에서 양식 확인 및 제출

Angular2 - 외부에서 양식 확인 및 제출

이렇게 생긴 간단한 양식이 있습니다.

<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>

그리고 양식을 제출하고 외부에서 유효성을 확인해야 합니다.

예를 들어, 프로그램적으로 제출하거나, 다음과 같이 제출합니다.<button type="submit">그것은 바깥쪽에 있습니다.<form>꼬리표

단추의 양식 속성을 사용하여 단추를 양식에 연결할 수 있습니다.

<form (ngSubmit)="save()" id="ngForm" #documentEditForm="ngForm"> 
  ... 
</form>

<button form="ngForm">
  SAVE
</button>

다음과 같이 유효성을 확인할 수 있습니다.

<button form="ngForm" [disabled]="!documentEditForm.form.valid">
  SAVE
</button>

양에가 ID 있야합니다가 합니다.id="example-form" 제출 하여 " 고제버일는치하서에튼출그리▁id▁in▁a▁the는▁and▁id" 아이디와 하는 아이디를 입력합니다.form="example-form"

자세한 내용은 여기를 참조하십시오. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-form

방법 알아보기:

• with 트제 : "<formname>.ngSubmit.emit()
• 으로 폼 <formname>.form.valid

예:

<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>

<button class="btn-save button primary"
(click)="documentEditForm.ngSubmit.emit()"
[disabled]="!documentEditForm.form.valid">SAVE</button>

편집: @yuryy-yakovenko가 지적했듯이 구성 요소 코드에 다음을 추가해야 합니다.

@ViewChild('documentEditForm') documentEditForm: FormGroupDirective; 

그리고 그것을 가져오는 것을 잊지 마세요.FormGroupDirective

중요: 각도 재료 폼 컨트롤 + 반응형 폼을 사용하는 경우

러onSubmit(undefined)적절하게 설정하기 위해submitted = true에서.[formGroup]

참고: 지침이 각도 형식 자체와 동일한 개체가 아닙니다(자세한 내용은 아래 참조).

다음은 명령어 소스 코드의 일부입니다. (반응형의 경우)

@Directive({
  selector: '[formGroup]',
  providers: [formDirectiveProvider],
  host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
  exportAs: 'ngForm'
})
export class FormGroupDirective extends ControlContainer implements Form,
    OnChanges {
  /**
   * @description
   * Reports whether the form submission has been triggered.
   */
  public readonly submitted: boolean = false;

 .....

 onSubmit($event: Event): boolean {
    (this as{submitted: boolean}).submitted = true;
    syncPendingControls(this.form, this.directives);
    this.ngSubmit.emit($event);
    return false;
 }

다음과 같이 사용합니다.

<form [formGroup]="form" #formRef="ngForm">

그리고 당신은 그것에 대한 참조를 얻을 수 있습니다.FormGroupDirective의 신의에ts다음 파일이 포함된 파일:

@ViewChild('formRef') 
formRef: FormGroupDirective;

• 참고: 다음 명령을 생성할 때 자동으로 적용되는 또 다른 지침입니다.<form>꼬리표를 달다
• 혼동하기 쉬운 참고:둘다요.NgForm그리고.FormGroupDirective갖고 있다exportAs: 'ngForm'그들의 소스 코드에서, (그리고 그들은 둘 다 선언합니다.submitted그리고.ngSubmit속성)을 선택합니다.하지만 내가 말할 때는.#ngForm='ngForm'는 유의개체있습다니 유형의 를 얻습니다.FormGroupDirective그리고 아닌NgForm(디버거에 포함됨).정확히 왜 그런지는 모르겠지만, 그것이 제가 그것을 선언한 이유입니다.FormGroupDirective그리고 아닌NgForm첫번째가 이길 수도 있다고 생각합니다.

다음과 같이 사용합니다.

this.formRef.onSubmit(undefined)

예:

// html
<form [formGroup]="form" #formRef="ngForm">
    // ...Form Controls
</form>

// component.ts
export class MyComponent {

    @ViewChild('formRef')
    formRef: FormGroupDirective;

    form: FormGroup = new FormGroup({
        myInput: new FormControl(''),
        //etc...
    });

    submitFormProgrammatically() {
        this.formRef.onSubmit(undefined);
    }
}

만약 당신이 그냥 전화를 한다면,this.formRef.ngSubmit.emit()은 모든 한 것을 것입니다.submitted = true 세트

이것이 왜 중요합니까?

Angular CDK 또는 Angular Material 컨트롤을 사용하는 경우 양식 필드를 터치하거나(클릭하거나 포커스를 획득) 양식을 전체적으로 제출하지 않으면 오류 조건이 표시되지 않습니다.

따라서 마우스/커서가 입력하지 않은 필수 필드가 누락된 경우 입력하더라도 해당 필드는 빨간색으로 표시되지 않습니다.ngSubmit.emit())submitted = false 형위태와통를해제위해▁fortouched = false).

그러면 일반 제출 버튼을 사용하면 어떻게 정상적으로 작동합니까?

일반적으로 만약 당신이 가지고 있다면.<button type='submit'>Submit</button>((으)로 <form> 태그를 .<form>Angular와이 없음) - 제와기하(Angular 관없음련높다니입기준) - 그고은그을것리출▁a▁to▁standard높다.submit폼 태그에 이벤트가 있습니다.

에 그 그다면라면.<form>태그에도 다음이 있습니다.[formGroup]에 대한 지시문을 입력한 다음 형식을 합니다.submit이벤트는 지시에 의해 '비활성화'되고 그것이 원인입니다.onSubmit()위의 함수를 호출합니다.

이는 차례로 다음을 높입니다.ngSubmit이벤트 - 추가 처리가 필요한 경우 직접 잡을 수 있습니다. 예를 들어 경고를 표시합니다.

그래서 전화하는 것이 매우 중요합니다.onSubmit그리고 아닌ngSubmit.emit재료(문서 양식) 컨트롤을 사용할 때 유효성 검사 처리를 수행합니다.$event 매개 변수는 null이거나 정의되지 않은 것일 수 있습니다.

추가 읽기: 다음을 참조하십시오.ErrorStateMatcher(Angular CDK/Material의 경우에만 해당) 정확한 규칙을 확인할 수 있습니다.기본값의 제한 사항을 해결하는 작업이 너무 복잡해지는 경우 직접 작성할 수 있습니다.

더 혼란스러운 것은: The.[formGroup]지시문이 와(와) 동일한 개체가 아닙니다.FormGroup데이터만 저장합니다.에만 지만있다가 .submitted- 반면에 에면반에.FormGroup와 같은 것들이 있습니다.touched,pristine,dirty.

사용하여 나에게 효과가 있는 속임수

• 반응형
• 앵귤러2
• IE를 포함

다음과 같습니까?

<!-- real button will simulate click on invisible button (cf. form) -->
<button onclick="document.getElementById('hiddenSaveButtonForMicrosoftWithLove').click()">
  The Real Button outside forms
</button>

<form>
  <!-- will be called in the background and is never visible -->
  <button id="hiddenSaveButtonForMicrosoftWithLove" type="submit" style="display: none;">hiddenSaveButtonForMicrosoftWithLove</button>
</form>

이 예제는 Angular 6 이상에서 작동합니다.

<form (ngSubmit)="save()" id="ngForm" [formGroup]="form"> 
    ... 
</form>

<button type="submit" class="btn-save button primary" form="ngForm">Save</button>

반응형 양식을 사용하는 경우 formGroup invalid 속성을 사용하여 제출 단추를 비활성화합니다.

<button  
  form="ngForm"
  [disabled]=" editor.invalid>Enviar</button> 

...

<form [formGroup]="editor"  id="ngForm"   (ngSubmit)="save()" novalidate >
...
</form>

이것은 나에게 효과가 있습니다.

<form #editForm="ngForm">
  <button type="button" (click)="editForm.submitted = true; editForm.ngSubmit.emit(); anotherMethod();">
    Submit programatically
  </button>
</form>

두 가지를 모두 설정하는 것이 핵심입니다.submitted = true 방출하는 및출.ngSubmit이벤트

아래의 해결책이 제 경우에 효과가 있습니다, 이 간단한 해결책을 시도해 보세요.모든 조건에서 작동할 것인지 확실하지 않습니다.

<form #documentEditForm="ngForm" id="ngForm" (ngSubmit)="save(documentEditForm.valid)"> 
    ...Your Input Elements... 
</form>

버튼은 다음과 같이 양식 외부에 선언해야 합니다.

<button form="ngForm">Submit</button>

양식의 유효성을 검사하려면 다음 조건에 따라 save()를 체크인해야 합니다.

save(isValid:boolean){
    if(isValid) {
        ...Your code to save details...
    }
}

이 간단한 해결책이 당신에게 도움이 되길 바랍니다.

누군가에게 도움이 되기를 바라며 이 답변을 씁니다.저는 이 문제를 해결하기 위해 하루 종일 시간을 보냈습니다. 그 안에 있는 모든 답변과 댓글을 따라가면서요.그러나 무엇을 시도해도 #documentEditForm(내 동등한 형식)을 찾을 수 없습니다(정의되지 않은 속성 x를 읽을 수 없습니다...)라는 오류 메시지가 여전히 표시됩니다.

가 '것이 는 제출을 양식태외유하는것문제이생/ 안에 넣자마자 이 문제가 사라졌기 입니다.</form>꼬리표. 저는 토끼굴을 내려갔지만, 나중에 제가 그 형태에서 벗어나야 하는 정당한 이유가 있다는 것을 깨달았습니다.

하지만 나중에 저는 (1) 추가함으로써 이 문제를 해결하기 위해 두 가지 일을 해야 한다는 것을 깨달았습니다.? 확인 ngForm의 그리고 ( 확성인및 (2) 구ngForm의를 할 때.ViewChild(NgForm) documentEditForm!: NgForm.

<form #documentEditForm="ngForm">
...
</form>

<button class="btn-save button primary" (click)="save()" [disabled]="documentEditForm?.invalid">
   SAVE
</button>

내부 component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

export class XYZComponent implements OnInit {

  @ViewChild(NgForm) documentEditForm!: NgForm;

...

Angular에서 템플릿 기반 양식을 사용하는 경우 #form_name="ngForm" 구문을 사용하면 양식 바로 안쪽에 노출됩니다.그러나 ViewChild를 사용하면 양식 내부뿐만 아니라 전체 구성요소에 양식을 노출할 수 있습니다.앱이 컴파일에 실패하거나 예기치 않은 출력/오류를 제공하는 경우 이전 버전을 제공합니다.?시험삼아 해 보다

언급URL : https://stackoverflow.com/questions/38054631/angular2-validate-and-submit-form-from-outside