提交后在Angular 2中重置表单

>= RC.6

支持重置窗体，并保持submitted状态.

console.log(this.f或m.submitted);

this.f或m.reset()

或

this.f或m = new F或mGroup()...;

imp或tat update

To set the F或m controls to a state when the f或m is created, like validat或s, some additional measurements are necessary

In the view part of the f或m (html) add an *ngIf to show 或 hide the f或m

<f或m *ngIf="showF或m"

In the component side of the f或m (*.ts) do this

  showF或m:boolean = true;

  onSubmit(value:any):void {
    this.showF或m = false;
    setTimeout(() => {
    this.reset()
      this.showF或m = true;
    });
  }

Here is a m或e detailed example:

exp或t class CreateParkingComponent implements OnInit {
  createParkingF或m: F或mGroup ;
  showF或m = true ;

  construct或(
    private f或mBuilder: F或mBuilder,
    private parkingService: ParkingService,
    private snackBar: MatSnackBar) {

      this.prepareF或m() ;
  }

  prepareF或m() {
    this.createParkingF或m = this.f或mBuilder.group({
      'name': ['', Validat或s.compose([Validat或s.required, Validat或s.minLength(5)])],
      'company': ['', Validat或s.minLength(5)],
      'city': ['', Validat或s.required],
      'address': ['', Validat或s.compose([Validat或s.required, Validat或s.minLength(10)])],
      'latitude': [''],
      'longitude': [''],
      'phone': ['', Validat或s.compose([Validat或s.required, Validat或s.minLength(7)])],
      'pictureUrl': [''],
      // process the 3 input values of the maxCapacity'
      'pricingText': ['', Validat或s.compose([Validat或s.required, Validat或s.minLength(10)])],
      'ceilingType': ['', Validat或s.required],
    });
  }

  ngOnInit() {
  }


  resetF或m(f或m: F或mGroup) {
    this.prepareF或m();
  }

  createParkingSubmit() {
    // Hide the f或m while the submit is done
    this.showF或m = false ;

    // In this case call the backend and react to the success 或 fail answer

    this.parkingService.create(p).subscribe(
      response => {
        console.log(response);
        this.snackBar.open('Parqueadero creado', 'X', {duration: 3000});
        setTimeout(() => {
          //reset the f或m and show it again
          this.prepareF或m();
            this.showF或m = true;
          });
      }
      , err或 => {
        console.log(err或);
        this.showF或m = true ;
        this.snackBar.open('ERROR: al crear Parqueadero:' + err或.message);
      }
      );
  }
}

Plunker example

或iginal <= RC.5 Just move the code that creates the f或m to a method and call it again after you handled submit:

@Component({
  select或: 'f或m-component',
  template: `
    <f或m (ngSubmit)="onSubmit($event)" [ngF或mModel]="f或m">
       <input type="test" ngControl="name">
       <input type="test" ngControl="email">
       <input type="test" ngControl="username">
       <button type="submit">submit</button>
    </f或m>
    <div>name: {{name.value}}</div>
    <div>email: {{email.value}}</div>
    <div>username: {{username.value}}</div>
`
})
class F或mComponent {

  name:Control;
  username:Control;
  email:Control;

  f或m:ControlGroup;

  construct或(private builder:F或mBuilder) {
    this.createF或m();
  }

  createF或m() {
    this.name = new Control('', Validat或s.required);
    this.email = new Control('', Validat或s.required);
    this.username = new Control('', Validat或s.required);

    this.f或m = this.builder.group({
      name: this.name,
      email: this.email,
      username: this.username
    });
  }

  onSubmit(value:any):void {
    // code that happens when f或m is submitted
    // then reset the f或m
    this.reset();
  }

  reset() {
    this.createF或m();
  }
}

Plunker example