Angular 2에서 제출한 후 양식을 지우는 방법은 무엇입니까?
나는 템플릿이 있는 간단한 각진 2 구성 요소를 가지고 있습니다.제출 후 양식과 모든 필드를 삭제하는 방법은 무엇입니까?페이지를 다시 로드할 수 없습니다.데이터를 설정한 후date.setValue('')
필드가 정지합니다.touched
.
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common';
@Component({
selector: 'loading-form',
templateUrl: 'app/loadings/loading-form.component.html',
directives: [FORM_DIRECTIVES]
})
export class LoadingFormComponent {
private form:ControlGroup;
private date:Control;
private capacity:Control;
constructor(private _loadingsService:LoadingsService, fb:FormBuilder) {
this.date = new Control('', Validators.required);
this.capacity = new Control('', Validators.required);
this.form = fb.group({
'date': this.date,
'capacity': this.capacity
});
}
onSubmit(value:any):void {
//send some data to backend
}
}
loading-form.component.component.sys
<div class="card card-block">
<h3 class="card-title">Loading form</h3>
<form (ngSubmit)="onSubmit(form.value)" [ngFormModel]="form">
<fieldset class="form-group" [class.has-danger]="!date.valid && date.touched">
<label class="form-control-label" for="dateInput">Date</label>
<input type="text" class="form-control form-control-danger form-control-success" id="dateInput"
min="0" placeholder="Enter loading date"
[ngFormControl]="form.controls['date']">
</fieldset>
<fieldset class="form-group" [class.has-danger]="!capacity.valid && capacity.touched">
<label class="form-control-label" for="capacityInput">Capacity</label>
<input type="number" class="form-control form-control-danger form-control-success" id="capacityInput"
placeholder="Enter capacity"
[ngFormControl]="form.controls['capacity']">
</fieldset>
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit
</button>
</form>
</div>
https://angular.io/docs/ts/latest/guide/reactive-forms.html 도 참조하십시오("양식 플래그 지정" 섹션).
>=RC.6
RC.6에서는 폼 모델을 업데이트하는 것이 지원되어야 합니다.새 양식 그룹 작성 및 할당myForm
[formGroup]="myForm"
또한 지원될 것입니다(https://github.com/angular/angular/pull/11051#issuecomment-243483654) .
>=RC.5
form.reset();
새 양식 모듈(>= RC.5)에서NgForm
을 가지고 있습니다.reset()
메소드 및 폼도 지원합니다.reset
이벤트. https://github.com/angular/angular/blob/6fd5bc075d70879c487c0188f6cd5b148e72a4dd/modules/%40angular/forms/src/directives/ng_form.ts#L179
<=RC.3
이렇게 하면 됩니다.
onSubmit(value:any):void {
//send some data to backend
for(var name in form.controls) {
(<Control>form.controls[name]).updateValue('');
/*(<FormControl>form.controls[name]).updateValue('');*/ this should work in RC4 if `Control` is not working, working same in my case
form.controls[name].setErrors(null);
}
}
참고 항목
- https://github.com/angular/angular/issues/6196
- https://github.com/angular/angular/issues/6169
- https://github.com/angular/angular/issues/4933
- https://github.com/angular/angular/issues/4914
- https://github.com/angular/angular/issues/6371
Angular2 RC5 기준,myFormGroup.reset()
속임수를 쓰는 것 같습니다.
제출 후 양식을 재설정하려면 간단히 호출할 수 있습니다.this.form.reset()
전화로reset()
다음과 같습니다.
- 컨트롤 및 하위 컨트롤을 기본값으로 표시합니다.
- 컨트롤과 하위 컨트롤을 손대지 않은 것으로 표시합니다.
- 컨트롤 및 자식 컨트롤의 값을 사용자 지정 값 또는 null로 설정합니다.
- 영향을 받는 당사자의 값/유효성/오류를 업데이트합니다.
자세한 답변은 이 끌어오기 요청을 참조하십시오.참고로 이 PR은 이미 2.0.0에 병합되었습니다.
이것이 도움이 되기를 바라며 Angular2 Forms와 관련하여 다른 질문이 있으면 알려주시기 바랍니다.
전화 걸기clearForm();
.ts 파일에서
양식 데이터를 지우려면 아래 예제 코드 조각과 같이 시도하십시오.
clearForm() {
this.addContactForm.reset({
'first_name': '',
'last_name': '',
'mobile': '',
'address': '',
'city': '',
'state': '',
'country': '',
'zip': ''
});
}
Angular 8:
양식에 대한 로컬 참조를 얻습니다.
<form name="myForm" #myForm="ngForm"></form>
@ViewChild('myForm', {static: false}) myForm: NgForm;
그리고 양식을 재설정해야 할 때마다 전화하세요.resetForm
방법:
this.myForm.resetForm();
필요할 것입니다.FormsModule
부터@angular/forms
그것이 작동하기 위해.모듈 가져오기에 추가해야 합니다.
Angular 7.3에서 수행하는 방법은 다음과 같습니다.
// you can put this method in a module and reuse it as needed
resetForm(form: FormGroup) {
form.reset();
Object.keys(form.controls).forEach(key => {
form.get(key).setErrors(null) ;
});
}
전화할 필요가 없었습니다.form.clearValidators()
import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';
@Component({
selector: 'example-app',
template: '<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
<input name="first" ngModel required #first="ngModel">
<input name="last" ngModel>
<button>Submit</button>
</form>
<p>First name value: {{ first.value }}</p>
<p>First name valid: {{ first.valid }}</p>
<p>Form value: {{ f.value | json }}</p>
<p>Form valid: {{ f.valid }}</p>',
})
export class SimpleFormComp {
onSubmit(f: NgForm) {
// some stuff
f.resetForm();
}
}
Angular 버전 4에서는 다음을 사용할 수 있습니다.
this.heroForm.reset();
그러나 다음과 같은 초기 값이 필요할 수 있습니다.
ngOnChanges() {
this.heroForm.reset({
name: this.hero.name, //Or '' to empty initial value.
address: this.hero.addresses[0] || new Address()
});
}
개체 참조에서 null 문제를 해결하는 것이 중요합니다.
참조 링크, "폼 플래그 재설정"을 검색합니다.
이 .myForm.reset();
이 정도면...원하는 출력을 얻을 수 있습니다.
이에 대한 새로운 논의가 있습니다(https://github.com/angular/angular/issues/4933) .지금까지는 제출 후 전체 양식을 다시 작성하는 것과 같이 양식을 지울 수 있는 일부 해킹만 있습니다. https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/
제출 시 전체 양식을 재설정하려면 Angular(각도)에서 reset()을 사용할 수 있습니다.아래 예제는 Angular 8에 구현되어 있습니다.아래는 이메일을 입력으로 받는 구독 양식입니다.
<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
<input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
placeholder="Enter your email" required ngModel #email="ngModel" email>
<div class="input-group-append">
<button class="btn btn-rounded btn-dark" type="submit" id="register"
[disabled]="!subscribeForm.valid">Register</button>
</div>
</div>
</form>
공식 문서 참조: https://angular.io/guide/forms#show-and-hide-validation-error-messages .
저는 다른 해결책을 찾았습니다.그것은 약간 구식이지만 각진 2 세계에서 널리 사용할 수 있습니다.
*ngIf 디렉티브가 양식을 제거하고 다시 만들기 때문에 *ngIf를 양식에 추가하고 다음과 같은 형식으로 바인딩할 수 있습니다.formSuccessfullySent
수변. 됩니다.=> 폼이 다시 생성되어 입력 제어 상태가 재설정됩니다.
물론 모형 변수도 삭제해야 합니다.저는 제 폼 필드에 특정 모델 클래스가 있는 것이 편리하다는 것을 알게 되었습니다.이렇게 하면 이 모델 클래스의 새 인스턴스를 만드는 것처럼 모든 필드를 재설정할 수 있습니다.:)
흠, 이제 (2017년 1월 23일, 각 2.4.3) 다음과 같이 작동했습니다.
newHero() {
return this.model = new Hero(42, 'APPLIED VALUE', '');
}
<button type="button" class="btn btn-default" (click)="heroForm.resetForm(newHero())">New Hero</button>
아래 코드는 Angular 4에서 작동합니다.
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class RegisterComponent implements OnInit {
registerForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.registerForm = this.formBuilder.group({
empname: [''],
empemail: ['']
});
}
onRegister(){
//sending data to server using http request
this.registerForm.reset()
}
}
resetForm(){
ObjectName = {};
}
언급URL : https://stackoverflow.com/questions/34742023/how-to-clear-form-after-submit-in-angular-2
'programing' 카테고리의 다른 글
인덱스 배열의 값과 키를 비교하는 연관 배열을 필터링하는 방법은 무엇입니까? (0) | 2023.05.27 |
---|---|
Angular 2 사이트에서 브라우저 캐시를 방지하는 방법은 무엇입니까? (0) | 2023.05.27 |
외래 키 제약 조건을 도입하면 주기 또는 다중 캐스케이드 경로가 발생할 수 있습니다. 그 이유는 무엇입니까? (0) | 2023.05.27 |
MongoDB $in 쿼리에 대한 응답 순서? (0) | 2023.05.27 |
여러 Git 커밋을 되돌리려면 어떻게 해야 합니까? (0) | 2023.05.27 |