javascript - 单击编辑按钮时会添加额外的文本框，我们将不胜感激

Question

我给用户一个问题和 4 个选项（例如），我面临的问题是，当我编辑它时，它向我显示了更多选项（我提供的选项正在添加空文本框）..我只想向用户显示填充的文本框而不是空的文本框。editItem() 是函数名

  export class StMultipleChoiceComponent implements OnInit {
      public bodyField: Array<IFieldsMultipleChoice>;
      public falseAnswer = [];
      public option_multiple: Array<any>;
      public newItem: boolean = false;
      public formAdd: FormGroup;
      public formImage: FormGroup;
      public form_option_multiple: FormGroup;
      public updateData: boolean = false;
      public item: number;
      public imagen: boolean = false;
      public video: boolean = false;
      public contenido: boolean = false;
    
      public img: File;
      public preoaderImg: string = '/assets/images/example.jpg';
      public srcImgVideo: string = '/assets/images/NoSignal.jpg';
    
      public items: FormArray;
      public list_question: Array<any> = [];
    
      @Input() key: any;
      @Input() form: FormGroup;
      @Input() values: any;
    
      constructor(
        private forms: FormBuilder
      ) { }
    
      ngOnInit() {
        if (this.values != null && this.values != undefined) {
          this.list_question = this.values;
        } else {
          this.createList();
        }
    
        this.createForm();
        // this.addItemFalse();
        this.form.controls[this.key.key].setValue(this.list_question);
      }
      public addItem() {
        console.log('nuevo item');
        this.formAdd.reset();
        this.preoaderImg = '/assets/images/example.jpg';
        this.newItem = !this.newItem;
      }
    
      public itemCreate() {
        return this.forms.group({
          answerFalse: new FormControl('', Validators.compose([
            Validators.required
          ]))
        });
      }
    
      public createItem() {
        console.log('data form', this.formAdd.value);
        this.list_question.push(this.formAdd.value);
        console.log('lista de pregunta', this.list_question);
        this.resetForm();
        this.formAdd.reset();
        this.formImage.reset();
        this.preoaderImg = '/assets/images/example.jpg';
    
      }
    
      private resetForm() {
        const tam: number = this.list_question.length;
        const delteArray: Array<any> = this.list_question[tam - 1].falseAnswer;
        delteArray.forEach((item, index) => {
          if (index !== 0) {
            this.items = this.formAdd.get('falseAnswer') as FormArray;
            this.items.removeAt(index);
          }
        });
      }
    
      private createForm() {
        this.formAdd = this.forms.group({
          name: new FormControl('', Validators.compose([
            Validators.required
          ])),
          correctAnswer: new FormControl('', Validators.compose([
            Validators.required
          ])),
          file: new FormControl('', Validators.compose([
    
          ])),
          video: new FormControl('', Validators.compose([
    
          ])),
          falseAnswer: this.forms.array([this.itemCreate()]),
          type_multimedia: new FormControl('none', Validators.compose([]))
    
        });
    
         this.formImage = this.forms.group({
          urlImage: new FormControl('', Validators.compose([
            Validators.required
          ]))
        });
      }
    
      private createList() {
        this.bodyField = [
        ];
        this.falseAnswer.push('');
      }
      
      public addItemFalse() {
    
        this.items = this.formAdd.get('falseAnswer') as FormArray;
        this.items.push(this.itemCreate());
      }
      public destroyFalseAnswer(item: number) {
    
        this.items = this.formAdd.get('falseAnswer') as FormArray;
        this.items.removeAt(item);
      }
    
      public destroyItem(item: number) {
        this.list_question.splice(item, 1);
        this.form.controls[this.key.key].setValue(this.list_question);
      }
    
      public editItem(item: number) {
        this.formAdd.controls['name'].setValue(this.list_question[item].name);
        this.formAdd.controls['correctAnswer'].setValue(this.list_question[item].correctAnswer);
        this.formAdd.controls['file'].setValue(this.list_question[item].file)
        this.preoaderImg = this.list_question[item].file;
        const falseAnswer: Array<any> = this.list_question[item].falseAnswer;
        falseAnswer.forEach((itemm, index) => {
          if (index !== 0 && itemm.answerFalse != '') {
            this.items = this.formAdd.get('falseAnswer') as FormArray;
            this.items.push(this.itemCreate());
          }
        });
    
        this.formAdd.controls['falseAnswer'].patchValue(this.list_question[item].falseAnswer);
    
        console.log(this.formAdd.value);
    
        this.updateData = true;
        this.item = item;
        this.newItem = !this.newItem;
      }
    
      public updateItem() {
        this.list_question.splice(this.item, 1);
        this.list_question.push(this.formAdd.value);
        this.resetForm();
        console.log('update list', this.list_question);
        // this.newItem = !this.newItem;
        this.updateData = !this.updateData;
        this.formAdd.reset();
        this.preoaderImg = '/assets/images/example.jpg'
        this.newItem = !this.newItem;
      }
    
    }
    
        
    <div class="form-group" formArrayName="falseAnswer" >
        <ul>
          <li *ngFor="let item of formAdd.controls['falseAnswer']['controls']; let i = index;">
            <label class="col-form-label title" i18n="@@titleFalseAnswerMultipleChoice">Respuesta falsa</label>
            <div class="row" [formGroupName]="i" *ngIf="i !== 0" style="margin-left: 0px;">
              <input formControlName='answerFalse' [name]="i" [id]="i" type="text" class="form-control col-md-10">
              <span class="col-md-2" style='cursor: pointer;'>
                <i class="fas fa-trash-alt" (click)='destroyFalseAnswer(i)'></i>
              </span>
            </div>
            <div *ngIf="i===0" [formGroupName]="i">
              <input formControlName='answerFalse' [name]="i" [id]="i" type="text" class="form-control">
            </div>
          </li>
        </ul>
    </div>
    <div class="col-md-12 mt-4 text-center">
        <a style="color: white;" (click)='addItemFalse()' class="btn btn-back-celest mb-3" i18n="@@addFalseAnswerMultipleChoice">
          Agregar respuesta falsa
        </a>
    </div>

标签： javascriptangularforms