Reaktiv shaklda Input maydonlarini o'chiring

Bu erdan boshqa javoblarning namunasiga rioya qilishga harakat qildim va muvaffaqiyatga erishmadim!

Men reaktiv shakl yaratdim (ya'ni, dinamik) va istalgan vaqtda biron bir maydonlarni o'chirib tashlamoqchiman. Mening formam:

this.form = this._fb.group({
  name: ['', Validators.required],
  options: this._fb.array([])
});

const control = <formArray>this.form.controls['options'];
control.push(this._fb.group({
  value: ['']
}));

mening html:

<div class='row' formArrayName="options">
  <div *ngFor="let opt of form.controls.options.controls; let i=index">
    <div [formGroupName]="i">
      
    </div>
  </div>
</div>

Kodni osonlashtirish uchun kodni qisqartirdim. Men tanlash turini o'chirishni xohlayman. Men quyidagilarni bajarishga harakat qildim:

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

ishlamayapti! Har bir insonning taklifi bormi?

18
Bu faqat matn terishdir. Tanlashni o'chirishni xohlayman. Menga yordam bera olasizmi?
qo'shib qo'ydi muallif Renato Souza de Oliveira, manba
first deb nomlangan bir necha formcontrolni o'chirib qo'ysangiz, tanlash qanday o'chirib qo'yilishi mumkin :)
qo'shib qo'ydi muallif AJT_82, manba
Bir chayqovchini takrorlay olasizmi?
qo'shib qo'ydi muallif AJT_82, manba
Barcha tanlovni o'chirib qo'ymoqchimisiz? Va value formArray emas, bu formControlName. Agar siz value bo'lsangiz, formArray uni o'zgartirishingiz kerak bo'ladi. Hozirda bu formControlName. Ya'ni, butun maydonni o'chirib qo'yishni istasangiz, <formArrayName = "value"> ni <formControlName = "value">
qo'shib qo'ydi muallif AJT_82, manba

7 javoblar

name: [{value: '', disabled: true}, Validatyokis.required],
name: [{value: '', disabled: this.isDisabled}, Validatyokis.required],

yoki

this.fyokim.controls['name'].disable();
35
qo'shib qo'ydi

Vaziyatga shartli o'zgaruvchini ishlatadigan ariza yaratganingizda va uni o'zgartirmoqchi bo'lsangiz, u ishlamaydi, ya'ni shakl o'zgartirilmaydi.

Misol uchun

this.isDisabled = true;

this.cardForm = this.fb.group({
    'number': [{value: null, disabled: this.isDisabled},
});

va o'zgaruvchini o'zgartirsangiz

this.isDisabled = false;

shakl o'zgarmaydi. Siz foydalanishingiz kerak

bu.cardForm.get («raqam») o'chirib qo'yish ();

BTW.

Siz qiymatni o'zgartirish uchun patchValue usulidan foydalaning:

this.cardForm.patchValue({
    'number': '1703'
});
11
qo'shib qo'ydi
men uchun yaxshi ishlaydi
qo'shib qo'ydi muallif Amir, manba
Javobimni yangiladim
qo'shib qo'ydi muallif Dmitry Grinko, manba

Yana umumiy yondashuv bo'ladi.

// Variable/Flag declare
public formDisabled = false;

// Form init
this.form = new FormGroup({
  name: new FormControl({value: '', disabled: this.formDisabled}, 
    Validators.required),
 });

// Enable/disable form control
public toggleFormState() {
    this.formDisabled = !this.formDisabled;
    const state = this.formDisabled ? 'disable' : 'enable';

    Object.keys(this.form.controls).forEach((controlName) => {
        this.form.controls[controlName][state]();//disables/enables each form control based on 'this.formDisabled'
    });
}
2
qo'shib qo'ydi

DOMda reaktiv shakllar bilan ishlashni o'chirib qo'yish juda yomon. Siz bu tashabbusni o'zingiz boshlaganingizda FormControl ga ushbu optinni o'rnatishingiz mumkin

username: new FormControl({ value: this.modelUser.Email, disabled: true }, [
    Validators.required,
    Validators.minLength(3),
    Validators.maxLength(99)
  ])

value funktsiyasi shart emas

2
qo'shib qo'ydi

Agar siz birinchi (formcontrol) ni o'chirib qo'ymoqchi bo'lsangiz, siz quyida berilgan iborani ishlatishingiz mumkin.

this.form.first.disable ();

0
qo'shib qo'ydi

Men uni o'zim kiritgan narsamni o'z ichiga olgan maydonda yorlig'i bilan saralab qo'ydim: Maydondagi satr boolean bilan bog'langan o'chirilgan xususiyatga ega bo'lishi kerak

 
<input class="form-control" id="firstName" type="text" formControlName="firstName" />
 
0
qo'shib qo'ydi

This worked for me: this.form.get('first').disable({onlySelf: true});

0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks