FormBuilder denetimi için değeri el ile ayarla

Bu beni delirtiyor, silahın altındayım ve bütün bir gününü bu güne harcayamam.

El ile bileşen içinde bir kontrol değeri ('borç') ayarlamaya çalışıyorum ve sadece çalışmıyor - hatta yeni değer günlükleri düzgün konsol için.

FormBuilder Örneği:

initForm() {
  this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required],
  });
}

Bu, seçilen bölümü alan olay işleyicisidir:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].value = selected.id;
}

Şimdi form gönderildiğinde ve oturumu kapattığımda this.formalan hala boş! Diğer ppl kullanımı gördüm updateValue()ama bu beta.1 ve ben kontrolü çağırmak için geçerli bir yöntem olarak görmüyorum.

Ben de updateValueAndValidity()başarıyla aramaya çalıştım :(.

ngControl="dept"Formun geri kalanıyla yaptığım gibi, sadece özel bir yönerge / bileşen gibi form öğesinde kullanabilirsiniz .

<ng-select
  [data]="dept"
  [multiple]="false"
  [items]="depts"
  (selected)="deptSelected($event)" <!-- This is how the value gets to me -->
  [placeholder]="'No Dept Selected'"></ng-select>

Güncelleme: 19/03/2017

this.form.controls['dept'].setValue(selected.id);

ESKİ:

Şimdilik bir tür döküm yapmak zorundayız:

(<Control>this.form.controls['dept']).updateValue(selected.id)

Çok zarif değil katılıyorum. Umarım bu gelecekteki sürümlerde düzelir.

Açısal 2 Finalinde (RC5 +), form değerlerini güncellemek için yeni API'ler vardır. patchValue()API yöntemi sadece bazı alanları belirtmek gerekir kısmi formu güncellemeleri, destekler:

this.form.patchValue({id: selected.id})

setValue()Tüm form alanlarına sahip bir nesneye ihtiyaç duyan API yöntemi de vardır . Eksik bir alan varsa, bir hata alırız.

Aangular 2 final'in güncellenmiş API'ları var. Bunun için birçok yöntem eklediler.

Form denetimini denetleyiciden güncelleştirmek için bunu yapın:

this.form.controls['dept'].setValue(selected.id);

this.form.controls['dept'].patchValue(selected.id);

Hataları sıfırlamaya gerek yok

Referanslar

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

https://toddmotto.com/angular-2-form-controls-patch-value-set-value

Reaktif form kontrolünün değerini güncellemek için aşağıdaki yöntemleri kullanabilirsiniz. Aşağıdaki yöntemlerden herhangi biri ihtiyacınıza uygun olacaktır.

SetValue () yöntemini kullanma

this.form.get("dept").setValue(selected.id);
this.form.controls["dept"].setValue(selected.id);

PatchValue () kullanılan yöntemler

this.form.get("dept").patchValue(selected.id);
this.form.controls['dept'].patchValue(selected.id);
this.form.patchValue({"dept": selected.id});

Son yöntem, formdaki tüm kontrolleri kapsamlı bir şekilde döngüye sokar, böylece tek kontrol güncellenirken tercih edilmez

Olay işleyicisinin içindeki yöntemlerden herhangi birini kullanabilirsiniz

deptSelected(selected: { id: string; text: string }) {
     // any of the above method can be added here
}

Gerekirse, form grubunda birden çok denetimi güncelleştirebilirsiniz.

this.form.patchValue({"dept": selected.id, "description":"description value"});

Bunu deneyebilirsiniz:

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // This is how I am trying to set the value
  this.form.controls['dept'].updateValue(selected.id);
}

Daha fazla ayrıntı için, updateValueyöntemin ikinci parametresi ile ilgili JS Dokümanına bakabilirsiniz : https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/model. ts # L269 .

Bunların hiçbiri benim için işe yaramadı. Yapmak zorundaydım:

  this.myForm.get('myVal').setValue(val);

  let cloneObj = Object.assign({}, this.form.getRawValue(), someClass);
  this.form.complexForm.patchValue(cloneObj);

Her alanı manuel olarak ayarlamak istemiyorsanız.

@ Filoche's Angular 2 güncellenmiş çözümü. kullanmaFormControl

(<Control>this.form.controls['dept']).updateValue(selected.id)

import { FormControl } from '@angular/forms';

(<FormControl>this.form.controls['dept']).setValue(selected.id));

Alternatif olarak @ AngularUniversity's çözümü hangi kullanımlarıpatchValue

Cevabın zaten verildiğini biliyorum, ancak diğer yeni gelenlerin net bir fikir alabilmesi için bir formun değerini nasıl güncelleyeceğimi biraz kısa bir cevap vermek istiyorum.

form yapınız örnek olarak kullanmak için mükemmeldir. bu yüzden cevabım boyunca onu form olarak göstereceğim.

this.form = this.fb.group({
    'name': ['', Validators.required],
    'dept': ['', Validators.required],
    'description': ['', Validators.required]
  });

bizim formumuz üç FormControl olan bir FormGroup türü nesnesidir .

Model değerini güncellemenin iki yolu vardır:

• Tek bir denetim için yeni bir değer ayarlamak için setValue () yöntemini kullanın. SetValue () yöntemi, form grubunun yapısına sıkı sıkıya yapışır ve denetimin tüm değerini değiştirir.

• Form modelinde değişen nesnede tanımlanan özellikleri değiştirmek için patchValue () yöntemini kullanın.

SetValue () yönteminin katı denetimleri, karmaşık biçimlerde iç içe geçmiş hataları yakalamaya yardımcı olurken, patchValue () bu hatalarda sessizce başarısız olur.

Buradaki açısal resmi belgelerden

Bu nedenle, birden çok denetim içeren bir form grubu örneğinin değerini güncelleştirirken, yalnızca modelin bazı bölümlerini güncelleştirmek isteyebilirsiniz. patchValue () aradığınız kişidir.

örneğe bakalım. Eğer kullandığınız zaman ) (patchValue

this.form.patchValue({
    dept: 1 
});
//here we are just updating only dept field and it will work.

ancak setValue () öğesini kullandığınızda , form grubunun yapısına sıkı sıkıya bağlı olduğundan tam modeli güncellemeniz gerekir. yani, yazarsak

this.form.setValue({
    dept: 1 
});
// it will throw error.

Form grubu modelinin tüm özelliklerini geçirmeliyiz. bunun gibi

this.form.setValue({
      name: 'Mr. Bean'
      dept: 1,
      description: 'spome description'
  });

ama bu stili sık kullanmıyorum. Kodumu daha temiz ve daha anlaşılır tutmaya yardımcı olan aşağıdaki yaklaşımı kullanmayı tercih ederim.

Ne yaptığım, tüm denetimleri ayrı bir değişken olarak bildirir ve belirli denetimi güncelleştirmek için setValue () kullanın.

yukarıdaki form için böyle bir şey yapacağım.

get companyIdentifier(): FormControl {
    return this.form.get('name') as FormControl;
}

get dept(): FormControl {
    return this.form.get('dept') as FormControl;
}

get description(): FormControl {
    return this.form.get('description') as FormControl;
}

form denetimini güncellemeniz gerektiğinde, güncelleştirmek için yalnızca bu özelliği kullanın. Örnekte, kullanıcı açılır listeden bir öğe seçtiğinde soru soran kişi borç formu denetimini güncellemeye çalıştı.

deptSelected(selected: { id: string; text: string }) {
  console.log(selected) // Shows proper selection!

  // instead of using this.form.controls['dept'].setValue(selected.id), I prefer the following.

  this.dept.setValue(selected.id); // this.dept is the property that returns the 'dept' FormControl of the form.
}

FormGroup tüm özellikleri ve yöntemleri hakkında bilgi almak için bir FormGroup API sahip öneririz .

Ek : alıcı hakkında bilgi için buraya bakın

Form denetimi kullanıyorsanız, bunu yapmanın en basit yolu:

this.FormName.get('ControlName').setValue(value);

İpucu: Formdaki her mülkü kullanıyorsanız setValueancak sağlamazsanız bir hata mesajı alırsınız:

Must supply a value for form control with name: 'stateOrProvince'.

Kullanmaya cazip olabilirsiniz patchValue, ancak tüm formu güncellemeye çalışıyorsanız bu tehlikeli olabilir. Bende addressolmayan bir tane var stateOrProvinceya dastateCd da ABD veya dünya çapında olmasına bağlı olarak.

Bunun yerine null değerlerini varsayılan olarak kullanacak şekilde şu şekilde güncelleme yapabilirsiniz:

this.form.setValue( { stateOrProvince: null, stateCd: null, ...address } );