angular কৌনিক 2 তে জমা দেওয়ার পরে ফর্মটি কীভাবে সাফ করবেন?



angular2-forms (10)

এইচএম, এখন (২৩ জানুয়ারী 2017 এ কৌণিক 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>

আমার কাছে টেমপ্লেট সহ কিছু সাধারণ কৌনিক 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
    }
}

লোড-form.component.html

<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>

Answer #1
resetForm(){
    ObjectName = {};
}

Answer #2

অ্যাঙ্গুলার 2 আরসি 5 হিসাবে, myFormGroup.reset() মনে হয় কৌশলটি করছেন।


Answer #3
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();
    }
}

Answer #4

এটি সম্পর্কে একটি নতুন আলোচনা রয়েছে ( https://github.com/angular/angular/issues/4933 )। এখনও অবধি কেবলমাত্র কিছু হ্যাক রয়েছে যা ফর্মটি সাফ করার অনুমতি দেয়, যেমন জমা দেওয়ার পরে পুরো ফর্মটি পুনরায় তৈরি করার মতো: https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/ : https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/ e એમ્બેડ. https://embed.plnkr.co/kMPjjJ1TWuYGVNlnQXrU/


Answer #5

জমা দেওয়ার পরে আপনার ফর্মটি পুনরায় সেট করতে, আপনি কেবল this.form.reset() করতে পারেন। reset() কল করে reset() এটি হবে:

  1. নিয়ন্ত্রণ এবং শিশু নিয়ন্ত্রণগুলি প্রাচীন হিসাবে চিহ্নিত করুন।
  2. নিয়ন্ত্রণ এবং শিশু নিয়ন্ত্রণ নিয়ন্ত্রণহীন হিসাবে চিহ্নিত করুন।
  3. নিয়ন্ত্রণ এবং শিশু নিয়ন্ত্রণের মান কাস্টম মান বা নালিতে সেট করুন
  4. প্রভাবিত দলগুলির মান / বৈধতা / ত্রুটি আপডেট করুন।

বিস্তারিত উত্তরের জন্য দয়া করে এই টানুন অনুরোধটি সন্ধান করুন । এফওয়াইআই, এই পিআর ইতিমধ্যে 2.0.0 এ একীভূত হয়েছে।

আশা করি এটি সহায়ক হতে পারে এবং অ্যাঙ্গুলার 2 ফর্ম সম্পর্কিত আপনার যদি অন্য কোনও প্রশ্ন থাকে তবে আমাকে জানান।


Answer #6

এখানে আমি কৌনিক 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() কল করার দরকার নেই


Answer #7

নীচে কোডটি কৌনিক 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()
 }

}

Answer #8

কৌনিক সংস্করণ 4 এ, আপনি এটি ব্যবহার করতে পারেন:

this.heroForm.reset();

তবে, আপনার প্রাথমিক মূল্য প্রয়োজন হতে পারে:

ngOnChanges() {
 this.heroForm.reset({
  name: this.hero.name, //Or '' to empty initial value. 
  address: this.hero.addresses[0] || new Address()
 });
}

আপনার অবজেক্ট রেফারেন্সে নাল সমস্যা সমাধান করা গুরুত্বপূর্ণ।

রেফারেন্স link , "ফর্মের পতাকাগুলি পুনরায় সেট করুন" এর জন্য অনুসন্ধান করুন।


Answer #9

https://angular.io/docs/ts/latest/guide/reactive-forms.html (বিভাগ "ফর্মের পতাকাগুলি পুনরায় সেট করুন") দেখুন

> = RC.6

আরসি। In এ এটি ফর্মের মডেলটি আপডেট করার জন্য সমর্থন করা উচিত। একটি নতুন ফর্ম গোষ্ঠী তৈরি করা এবং myForm বরাদ্দ করা

[formGroup]="myForm"

এছাড়াও সমর্থিত হবে ( https://github.com/angular/angular/pull/11051#issuecomment-243483654 )

> = RC.5

form.reset();

নতুন ফর্মগুলির মডিউলে (> = আরসি.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);
  }
}

আরো দেখুন





angular2-forms