角2，無法修補值來形成控件

Question

在我的角2應用程序中，我有一個編輯分配組件，當用戶單擊編輯按鈕時加載。它顯示一個表單並填充所有表單控件，並使用Firebase數據庫中現有的值進行編輯。當我第一次點擊編輯按鈕時，它會加載表單控件中的所有值。然後，如果我返回或導航到任何其他鏈接，然後再次單擊編輯按鈕，表單控件不會修補來自Firebase數據庫的值。

下面的圖像將幫助你理解這個問題更好：

我點擊編輯按鈕第一次一切，如果我回去一些其他的鏈接，然後點擊返回正常工作

然後再次編輯按鈕表單不會用來自Firebase數據庫的值修補表單控件。

我驗證我的表單如

constructor(
    private _routeParams: ActivatedRoute, 
    private _db: AngularFireDatabase, 
    private _fb: FormBuilder, 
    private _uploadService: UploadService, 
    private _getAsnService: GetAssignmentService, 
    private _editAsnSvc: EditAssignmentService, 
) { 
    console.log("in constructor"); 
    this.validate(); 
} 

ngOnInit() { 
    console.log("in init"); 
    this.getRouteParams(); 
    this.assignment = this._getAsnService.getAssignment(this.asnDetailKey); // this.assignment is FirebaseObjectObservable retrieved from firebase DB 
    this.setInputValues(); 
    this.getCourses(); 
    this.validate(); 
} 

validate() { 
this.form = this._fb.group({ 
    course: ['', Validators.compose([Validators.required])], 
    batch: ['', Validators.compose([Validators.required])], 
    subject: ['', Validators.compose([Validators.required])], 
    name: ['', Validators.compose([Validators.required])], 
    description: ['', Validators.compose([Validators.required])], 
    dueDate: ['', Validators.compose([Validators.required])] 
    }); 
    this.today = new Date().toJSON().split('T')[0]; 
} 

setInputValues() { 
    this.assignment.subscribe(asnDetails => { 
    console.log("setting values"); // <----- These are the values you see in console 
    this._assignment = asnDetails; 
    console.log(this._assignment); // <----- _assignment contains all values but form controls are unable to patch them 
    this.form.get('course').patchValue(this._assignment.course); 
    this.form.get('batch').patchValue(this._assignment.batch); 
    this.form.get('subject').patchValue(this._assignment.subject); 
    this.form.get('name').patchValue(this._assignment.AsnName); 
    this.form.get('description').patchValue(this._assignment.AsnDesc); 
    this.form.get('dueDate').patchValue(this._assignment.dueDate); 

    this.batches = this._db.list('/batches/' + this._assignment.course); 
}); 
} 

感謝

*編輯*

我刪除了setInputValues方法也做了validateForm方法內部驗證（我改變名稱從validate到validateForm）通過傳遞asnDetails給它告知@ developer033

ngOnInit() { 
this.getRouteParams(); 
this.assignment = this._getAsnService.getAssignment(this.asnDetailKey); 
this.assignment.subscribe(asnDetails => this.validateForm(asnDetails)); 
this.getCourses(); 
} 

validateForm(asnDetails) { 
this.form = this._fb.group({ 
    course: [asnDetails.course, Validators.compose([Validators.required])], 
    batch: [asnDetails.batch, Validators.compose([Validators.required])], 
    subject: [asnDetails.subject, Validators.compose([Validators.required])], 
    name: [asnDetails.AsnName, Validators.compose([Validators.required])], 
    description: [asnDetails.AsnDesc, Validators.compose([Validators.required])], 
    dueDate: [asnDetails.dueDate, Validators.compose([Validators.required])] 
}); 
this.today = new Date().toJSON().split('T')[0]; 
this.batches = this._db.list('/batches/' + asnDetails.course); 
} 

我還創建了一個initForm方法，並從構造函數中調用它來初始化窗體。

initForm() { 
this.form = this._fb.group({ 
    course: ['', Validators.compose([Validators.required])], 
    batch: ['', Validators.compose([Validators.required])], 
    subject: ['', Validators.compose([Validators.required])], 
    name: ['', Validators.compose([Validators.required])], 
    description: ['', Validators.compose([Validators.required])], 
    dueDate: ['', Validators.compose([Validators.required])] 
}); 
} 

我認爲這是動態驗證模型驅動表單的更簡潔的方式。

Answer 1

您的validate()方法其實是錯誤的。它使用默認值和自動執行的驗證器初始化表單。名稱validate()是誤導性的。在你的情況下，你每次創建一個帶有this._fb.group()的新表單，並且你鬆開了以前的所有值。它的第一次正常工作，因爲請求需要一些時間，並在此期間你的方法確實運行。我猜在所有其他情況下，請求可能會被緩存，因此在您的validate方法之前調用setInputValues。在致電asnService之前，只需將呼叫移至validate()，您應該會很好。問候Chris