webentwicklung-frage-antwort-db.com.de

Festlegen des Werts für die Formularsteuerung in reaktiven Formularen in Angular

Hallo allerseits, ich bin neu in Angular. Eigentlich versuche ich, Daten von einem Dienst zu abonnieren, und diese Daten übergebe ich an die Formularsteuerung von mir (zum Beispiel ist es wie ein Bearbeitungsformular).

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { QuestionService } from '../shared/question.service';

@Component({
  selector: 'app-update-que',
  templateUrl: './update-que.component.html',
  styleUrls: ['./update-que.component.scss']
})
export class UpdateQueComponent implements OnInit {

  questionsTypes = ['Text Type', 'Multiple choice', 'Single Select'];
  selectedQuestionType: string = "";
  question: any = {};

  constructor(private route: ActivatedRoute, private router: Router,
    private qService: QuestionService, private fb: FormBuilder) { 

  }

  ngOnInit() {
      this.getQuebyid();
  }

  getQuebyid(){
    this.route.params.subscribe(params => {
      this.qService.editQue([params['id']]).subscribe(res =>{
        this.question = res;
      });
    });
  }

  editqueForm =  this.fb.group({
    user: [''],
    questioning: ['', Validators.required],
    questionType: ['', Validators.required],
    options: new FormArray([])
  })

  setValue(){
    this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
  }

}

wenn ich [(ngModule)] in meinem Formularfeld verwende, um den Wert auf mein Element festzulegen, funktioniert es einwandfrei und zeigt eine Warnung an, die in der Version angular 7) veraltet ist.

<textarea formControlName="questioning" [(ngModule)]="question.questioning" cols="70" rows="4"></textarea>

Daher setze ich die Werte wie folgt auf mein Formularsteuerelement, aber das Element zeigt diese Werte nicht an.

setValue(){
   this.editqueForm.setValue({user: this.question.user, questioning: this.question.questioning})
}

kann mir jemand sagen, wie man Werte auf meine reaktive Form setzt. Bitte schlagen Sie mich vor.

24
sun

Festlegen oder Aktualisieren von Formularen für reaktive Formulare Die Formularsteuerung kann sowohl mit patchValue als auch mit setValue erfolgen. In einigen Fällen ist es jedoch möglicherweise besser, patchValue zu verwenden.

patchValue erfordert nicht, dass alle Steuerelemente in den Parametern angegeben werden, um den Wert Ihrer Formularsteuerelemente zu aktualisieren/festzulegen. Andererseits erfordert setValue, dass alle Form Control-Werte ausgefüllt werden, und es wird ein Fehler zurückgegeben, wenn eines Ihrer Steuerelemente nicht im Parameter angegeben ist.

In diesem Szenario möchten wir patchValue verwenden, da wir nur user und questioning aktualisieren:

this.qService.editQue([params["id"]]).subscribe(res => {
  this.question = res;
  this.editqueForm.patchValue({
    user: this.question.user,
    questioning: this.question.questioning
  });
});

EDIT: Wenn Sie Lust haben, einige von ES6s Object Destructuring zu machen, könnten Sie daran interessiert sein, dies stattdessen zu tun ????

const { user, questioning } = this.question;

this.editqueForm.patchValue({
  user,
  questioning
});

TA Dah!

33
wentjun

In Reactive Form gibt es zwei primäre Lösungen, um die Werte der Formularfelder zu aktualisieren.

setValue:

  • Initialisieren Modellstruktur im Konstruktor:

    this.newForm = this.formBuilder.group({  
       firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]],
       lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(8)]]
    });
    
  • Wenn Sie alle Formularfelder aktualisieren möchten:

    this.newForm.setValue({
       firstName: 'abc',
       lastName: 'def'
    });
    
  • Wenn Sie ein bestimmtes Formularfeld aktualisieren möchten:

    this.newForm.controls.firstName.setValue('abc');
    

Hinweis : Es ist obligatorisch, eine vollständige Modellstruktur für alle Formularfeldsteuerelemente in der FormGroup bereitzustellen. Wenn Sie Eigenschaften- oder Teilmengen-Sammlungen verpassen, wird eine Ausnahme ausgelöst.

patchValue:

  • Wenn Sie einige/bestimmte Formularfelder aktualisieren möchten:

    this.newForm.patchValue({
       firstName: 'abc'
    });
    

Hinweis : Es ist nicht obligatorisch, eine Modellstruktur für alle/alle Formularfeldsteuerelemente innerhalb der FormGroup bereitzustellen. Wenn Sie eine Eigenschaft oder eine Teilmenge von Sammlungen verpassen, wird keine Ausnahme ausgelöst.

9

Die "übliche" Lösung besteht darin, eine Funktion zu erstellen, die eine leere formGroup oder eine vollständig ausgefüllte formGroup zurückgibt

createFormGroup(data:any)
{
 return this.fb.group({
   user: [data?data.user:null],
   questioning: [data?data.questioning:null, Validators.required],
   questionType: [data?data.questionType, Validators.required],
   options: new FormArray([this.createArray(data?data.options:null])
})
}

//return an array of formGroup
createArray(data:any[]|null):FormGroup[]
{
   return data.map(x=>this.fb.group({
        ....
   })
}

anschließend rufen Sie in ABONNIEREN die Funktion auf

this.qService.editQue([params["id"]]).subscribe(res => {
  this.editqueForm = this.createFormGroup(res);
});

seien Sie vorsichtig!, Ihr Formular muss ein * ngIf enthalten, um anfängliche Fehler zu vermeiden

<form *ngIf="editqueForm" [formGroup]="editqueForm">
   ....
</form>
3
Eliseo

Versuche dies.

editqueForm =  this.fb.group({
   user: [this.question.user],
   questioning: [this.question.questioning, Validators.required],
   questionType: [this.question.questionType, Validators.required],
   options: new FormArray([])
})

setValue und patchValue

wenn Sie den Wert eines Steuerelements festlegen möchten, funktioniert dies nicht. Daher müssen Sie den Wert beider Steuerelemente festlegen:

formgroup.setValue ({Name: 'abc', Alter: '25'}); Es ist notwendig, alle Steuerelemente innerhalb der Methode zu erwähnen. Wenn dies nicht getan wird, wird ein Fehler ausgegeben.

Auf der anderen Seite ist der Patch-Wert in diesem Bereich viel einfacher. Nehmen wir an, Sie möchten den Namen nur als neuen Wert zuweisen:

formgroup.patchValue ({name: ’abc’});

1
TAB

Um einem einzelnen Formularsteuerelement/einzeln einen Wert zuzuweisen, schlage ich vor, setValue folgendermaßen zu verwenden:

this.editqueForm.get('user').setValue(this.question.user);

this.editqueForm.get('questioning').setValue(this.question.questioning);
1
Devner