如何將反應式表單控件重置為原始狀態？

Question

嗨，我需要有關反應式表單元素的幫助。 基本上，它是必需的元素。 當視圖第一次加載時，元素不是紅色的（沒有顯示它需要一個值的錯誤）。 這很好，如果我點擊里面然后導航離開而不填寫它，它只會顯示紅色。 我目前的邏輯是，當我填寫並提交表單時……表單數據被提交，但我仍然在同一頁面上，但所有以前的值都被刪除了。 問題是......現在表單元素認為我沒有填寫它並且在它不應該抱怨時抱怨，因為從技術上講它是一個新表格。

這是我的表單組：

this.transactionForm = fb.group({
      'billNumber': [null, Validators.compose([Validators.required, Validators.pattern('^[a-zA-Z0-9\\-_]*$'), Validators.maxLength(30)])],
      'birthdate': [null, Validators.required],
      'transactionDate': [new Date(), Validators.required],
      'type': ['Sales', Validators.required],
    });

目前，我有一個名為 reset() 的函數，我在提交表單時調用它：

reset() {
    this.transactionForm.get('billNumber').setErrors({required: false});
    this.transactionForm.controls['billNumber'].setValue('');
    this.transactionForm.controls['billNumber'].setErrors({'incorrect': false});
    this.transactionForm.controls['billNumber'].markAsUntouched();
    this.transactionForm.controls['billNumber'].markAsPristine();
    this.transactionForm.controls['birthdate'].setValue(null);
    this.transactionForm.controls['birthdate'].markAsUntouched();
    this.transactionForm.controls['birthdate'].markAsPristine();
    this.transactionForm.controls['birthdate'].setErrors({'incorrect': false});
    this.transactionForm.controls['transactionDate'].setValue(new Date());
    this.transactionForm.controls['type'].setValue('Sales');
    this.transactionForm.clearValidators();
  }

將 type 和 transactionDate 重置為默認值更容易，但我不確定我可以對上面的生日或賬單編號做些什么。 我嘗試了上面的代碼，但在重置時，控件仍然是紅色的（並且無效）......它應該處於新的/原始狀態。 我怎樣才能解決這個問題？

Answer 1

使用reset('')並通過markAsPristine()將整個表單組設置為pristine markAsPristine()應該可以解決問題

Answer 2

重置方法

重置 FormGroup，將所有后代標記為原始和未觸及，並將所有后代的值設為 null。

this.transactionForm.reset();

或者如果你想將一個值傳遞給它，就像在表單重置后使用setValue方法一樣；

this.transactionForm.reset({contriolName01:'value..',controlName02:'value..'});

樣式無效的觸摸有效

.ng-invalid.ng-touched {
  border-color: red;
}

堆疊閃電戰示例

Answer 3

在 Angular 中重置表單

方法#1（❌不推薦）

HTML：

<button type="reset" >Clear Form </button> 

方法#2（✅首選）

打字稿：

fg = new FormGroup({name:new FormControl(''),
                     nestedFg : new FormGroup({abc : new FormControl('')})
                   })  
fg.reset()  // formGroup reset 
fg.get('name').reset() // formControl reset 
fg.get('nestedFg').reset()  // Nested formGroup reset
fg.get('nestedFg').get('abc').reset() // Nested formControl reset 

方法 #1 注意：有必要提及不要使用此方法，因為類型重置應避免按照 mozilla 文檔使用以獲取更多信息

方法#2：對表單給予更多控制使用 formGroup 給予更多控制

Answer 4

以上答案都不適合我，所以我意識到它必須通過將材料元素用於表單組控件來做一些事情。

我發現了這個錯誤： https : //github.com/angular/material2/issues/4190

添加這樣的東西為我修復了它：

@ViewChild(FormGroupDirective) myForm;

sendDataToBackendAndResetForm() {
  // TODO: send data to backend
  if (this.myForm) {
    this.myForm.resetForm();
  }
}

Answer 5

我不明白為什么在我傳遞了一個空字符串之前重置對我不起作用。 我想重置一個特定的控件。 Form 是用 formbuilder 和 Angular 8 構建的。

做了類似this.transactionForm.get('billNumber').reset('')