양식을 재설정하는 가장 깨끗한 방법

양식을 재설정하는 가장 깨끗한 방법

Angular 2 최신 버전에서 양식을 재설정하는 가장 깨끗한 방법은 무엇입니까?게시물 추가 후 입력된 텍스트 상자를 다시 설정하고 싶습니다.

@Component({
  selector: 'post-div',
  template: `
            <h2>Posts</h2>
            <form (submit)="addPost()">
                <label>Title: </label><input type="text" name="title" [(ngModel)]="title"><br/>
                <label>Body: </label><input type="text" name="body" [(ngModel)]="body"><br/>
                <input type="submit" value="Add Post">
            </form>
            <ul>
                <li *ngFor="let post of posts">
                    <strong>{{post.title}}</strong>
                    <p>{{post.body}}</p>
                </li>
            </ul>
          `,
  providers: [PostService]
});

addPost(){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
}

HTML 코드에 지시문에 대한 참조를 추가하면 양식에 액세스할 수 있으므로 다음을 사용할 수 있습니다..resetForm().

<form #myForm="ngForm" (ngSubmit)="addPost(); myForm.resetForm()"> ... </form>

...또는 양식을 함수에 전달합니다.

<form #myForm="ngForm" (ngSubmit)="addPost(myForm)"> ... </form>

addPost(form: NgForm){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this._postService.addPost(this.newPost);
    form.resetForm(); // or form.reset();
}

와의 차이점은 전자는 양식 필드와 유효성 검사를 모두 지운 반면 후자는 필드만 지운다는 것입니다.양식의 유효성을 확인하고 제출한 후 resetForm을 사용하고 그렇지 않으면 reset을 사용합니다.

---

위의 내용을 실행할 수 없는 사람들을 위해 또 다른 예를 추가합니다.

버튼을 누른 상태에서:

<form #heroForm="ngForm">
    ...
    <button type="button" class="btn btn-default" (click)="newHero(); heroForm.resetForm()">New Hero</button>
</form>

위와 동일한 사항이 적용됩니다. 양식을 사용자에게 전달하도록 선택할 수도 있습니다.newHero기능.

가장 쉽고 깨끗한 방법으로 양식과 오류 상태를 지웁니다(더럽고 깨끗한 상태 등).

this.formName.reset();

여기에서 읽은 양식들에 대한 더 많은 정보를 위하여.

• https://angular.io/docs/ts/latest/guide/forms.html

PS: 질문 코드에 사용된 양식이 없습니다. ngModel이 아닌 ngModel을 사용하여 간단한 이틀 데이터 바인딩을 사용하고 있습니다.formControl.

form.reset()메서드는 formControls reset call에 대해서만 작동합니다.

형태를 지우는 가장 쉬운 방법

<form #myForm="ngForm" (submit)="addPost();"> ... </form>

그런 다음 .ts 파일에서 템플릿의 로컬 변수에 액세스해야 합니다. 즉

@ViewChild('myForm') mytemplateForm : ngForm; //import { NgForm } from '@angular/forms';

값 및 상태(prinestine, touched...)를 재설정합니다.) 다음과 같은 일을 합니다.

addPost(){
this.newPost = {
    title: this.mytemplateForm.value.title,
    body: this.mytemplateForm.value.body
}
this._postService.addPost(this.newPost);
this.mytemplateForm.reset(); }

이 방법이 가장 깨끗한 방법입니다.

Angular 13에는 다음과 같은 흥미로운 기능이 추가되었습니다.양식 컨트롤을 작성할 때 사용할 수 있는initialValueIsDefault옵션을 사용할 때reset()양식의 값이 초기 값으로 설정됩니다.

리셋 버튼이나 유사한 논리가 있다면 더 큰 양식으로 유용하다고 생각합니다.

자세한 내용은 GitHub: https://github.com/angular/angular/pull/44434 의 기능 PR입니다.

간단한 HTML과 javascript로 typecript 오류를 방지하기 위해 HTML 요소를 캐스트하여 수행합니다.

<form id="Login">

component.ts 파일에

clearForm(){
 (<HTMLFormElement>document.getElementById("Login")).reset();
}

방법, 메소드clearForm()필요에 따라 어디든 호출할 수 있습니다.

component.html (이름을 지정한 양식

<form [formGroup]="contactForm">

(클릭 이벤트 추가(클릭)="clear Form()"

<button (click)="onSubmit()" (click)="clearForm()" type="submit" class="btn waves-light" mdbWavesEffect>Send<i class="fa fa-paper-plane-o ml-1"></i></button>

component.ts

 clearForm() {
             this.contactForm.reset();
            }

all code 보기 : https://ewebdesigns.com.au/angular-6-contact-form/ firebase 연락처 양식 추가하는 방법

this.<your_form>.form.markAsPristine();
this.<your_form>.form.markAsUntouched();
this.<your_form>.form.updateValueAndValidity();

도와줄 수도 있습니다.

각도 반응형:

onCancel(): void {
  this.registrationForm.reset();
  this.registrationForm.controls['name'].setErrors(null);
  this.registrationForm.controls['email'].setErrors(null);
}

단지 양식을 재설정하기 위해 사용합니다.reset()방법. 확인 등의 할 수 - 양식을 재설정하지만 유효성 검사 오류와 같은 문제가 발생할 수 있습니다. 예:Name is required

이 하려면 다음을 합니다.resetForm()방법. 합니다.양식을 재설정하고 문제를 해결하는 제출 상태도 재설정합니다.

resetForm()메서드는 실제로 reset () 메서드를 호출하고 추가로 submit 상태를 재설정합니다.

angular2+의 버튼으로 폼을 지우는 가장 간단한 방법은

양식에 #를 사용하여 이름을 지정합니다.

<form #your_form_name (ngSubmit)="submitData()"> </form>

<button (click)="clearForm(Your_form_name)"> clear form </button>

component.ts 파일에

clearForm(form: FormGroup) {
form.reset();
}

여기에는 많은 답변이 있지만 NgForm에서 함수를 재설정하기 위한 인수를 통과한 답변은 없습니다.

---

일부 값이 포함된 입력 필드의 이름을 양식을 재설정한 후 각으로 전달한 기본값과 동일한 값으로 초기화해야 합니다.HTML 파일의 양식은 다음과 같습니다.

<form (ngSubmit)="onSubmit()" #f="ngForm">
    <label for="username">Username</label>
    <input type="text" ngModel name="username" required>

    <label for="email">Mail</label>
    <input type="email" ngModel name="email" required email>

    <label for="secret">Secret Questions</label>
    <select name="secret" ngModel>
        <option value="" disabled hidden selected>Select your option</option>
        <option value="pet">Your first Pet?</option>
        <option value="teacher">Your first teacher?</option>
    </select>

    <button type="button" (click)="reset()">Reset</button>
    <button type="submit">Submit</button>
</form>

여기 당신의 .component.ts 파일이 있습니다.

export class AppComponent {

    @ViewChild('f') signupForm: NgForm    // import { NgForm } from '@angular/forms';

    reset() {
        this.signupForm.reset({
            "username": "",
            "email": "",
            "secret": ""
        })
    }

    onSubmit() {
        console.log(this.signupForm.value)
    }
}

이 방법은 "비밀"에 대한 기본값을 제공하지 않으면 재설정 버튼을 누른 후 입력 상자가 비어 있습니다(").기본값으로 설정되는 값은 없습니다.그러나 이제 기본값을 재설정하면 ""로 설정되므로 내부에서 필드 기본값을 선택하십시오. 즉 "옵션 선택" 텍스트가 나타납니다.기본값을 지정하지 않으려면 필드를 생략할 수도 있습니다.

14 의됩니다를 사용하여 됩니다.FormBuilder 시 실행 시:

this.contactForm.reset();

모든 필드가 null로 재설정됩니다.만,에,에를 NonNullableFormBuilder됩니다.아주 유용합니다!

자바스크립트를 통해서도 할 수 있습니다.

(document.querySelector("form_selector") as HTMLFormElement).reset();

양식을 재설정하려면 그룹에서와 같은 구조로 양식 이름을 사용하여 재설정 함수를 호출합니다.

addPost(){
    this.newPost = {
        title: this.title,
        body: this.body
    }
    this.formName.reset({
        "title": '',
        "body": ''
    });
}

    for (const key in this.someForm.controls) {
        this.someForm.get(key)?.clearValidators();
    }
    this.someForm.reset();

    //Declare the jquery param on top after import
declare var $: any;
declare var jQuery: any;

clearForm() {
    $('#contactForm')[0].reset();
}

언급URL : https://stackoverflow.com/questions/41500102/cleanest-way-to-reset-forms