Question

我开发了一个有角度的表格，希望当我选择一个元素时，输入中会出现一个值。同样，鉴于我从选择中获得的值来自服务器，我想显示一个与这些值相对应的标签，例如：如果我恢复了``AL''，我想显示前面的``ALLAN''。

我处理三个文件

A.component.html：

<form [formGroup]="action" (ngSubmit)="onSubmit()">

     // When I get back the type I'd like to display a different value than the one I'm looking for while keeping the base value in .ts
     <div class="form-group">
         <label for="exampleFormControlSelect1">Type</label>
         <select formControlName="type" class="form-control" *ngFor="let i of Type">
             <option *ngIf="{{i.type}}==ab" >{{tab2.label}}</option>
         </select>
      </div>

      // I would like to change this value when the type is chosen
      <div class="form-group" *ngFor="let t of Type">
         <label for="name" class="col-form-label">Nom:</label>
         <input type="text" formControlName="libelle" class="form-control" *ngIf="{{t.type}}==ab" value="{{tab.label}}" readonly="readonly">
      </div>
      <div class="footer">
         <button type="button" class="btn btn-primary (click)="onSubmit()">Enregistrer</button>
      </div>

</form>

A.component.ts：

import { Component, ViewEncapsulation,} from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { Environnement } from 'src/app/models';
import { AdministrationService } from 'src/app/services';
import { OnInit } from '@angular/core';
import { Name, Type } from 'src/app/app.constants';


@Component({
    selector: 'o-liaisonA',
    templateUrl: './A.component.html',
    styleUrls: ['./A.component.less'],
    encapsulation: ViewEncapsulation.None
})
export class AComponent implements OnInit {

    //var 
    Type: Environnement[];

    // Formulaire
    action: FormGroup;
    type: FormControl;
    libelle: FormControl;
    tab = Name;
    tab2 = Type;

    // Constructor
    constructor(private fb: FormBuilder, private administrationService: AdministrationService) {
        super();
        this.buildForm();
    }

    ngOnInit() {
        this.getType();
    }

    getFormGroup(): FormGroup {
        return this.action;
    }

    private buildForm() {
        this.submitted = false;

        this.type = this.fb.control('', Validators.required);
        this.libelle = this.fb.control('', Validators.required);

        this.action = this.fb.group({
            type: this.type,
            libelle: this.libelle
        });
    }

    getType(): void {
        this.administrationService.getType()
            .subscribe(
                (Type) => {
                    this.Type = Type;
                    console.log(Type);
                }
            );
    }

app.constants.ts：

export const Name = [
    {
        label: 'abibi',
        name: 'ab'
    },
    {
        label: 'cdidi',
        type: 'cd'
    }
];

export const Type = [
    {
        label: 'Rest',
        name: 'ab'
    },
    {
        label: 'Api',
        name: 'cd'
    }
]

有关服务的信息，请联系我：

{
  "type": [
    "ab", 
    "cd", 
    "ef"
  ]
}

它无法正常工作，我有错误

Answer 1

更改此

<option *ngIf="{{i.type}}==ab" >{{tab2.label}}</option>

到

<option *ngIf="i.type==ab" >{{tab2.label}}</option>

也要更改

<input *ngIf={{t.type}}==ab" type="text" formControlName="libelle" class="form-control"  value="{{tab.label}}" readonly="readonly" />

到

<input type="text" formControlName="libelle" class="form-control" *ngIf="t.type==ab" readonly="readonly">

修改后的答案

<form [formGroup]="action" (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label for="exampleFormControlSelect1">Type</label>
        <select formControlName="type" class="form-control"  (change)="onChange($event.target.value)">
            <option *ngFor="let i of Type">{{i}}</option>
        </select>
     </div>
    <input type="text" formControlName="libelle" class="form-control"  readonly="readonly" /> 
     <div class="footer">
        <button type="button" class="btn btn-primary" (click)="onSubmit()">Enregistrer</button>
     </div>   
</form>

将此添加到.ts文件中

onChange(value){
    this.action.get('libelle').setValue(value)
}

对于“如果我恢复“ AL”，我还要显示前面的“ ALLAN”。”

这应该从服务器API作为对象数组作为键值对返回

 [
    { "label": "Allan", "value": "ab"},
    { "label": "Sam", "value": "cd"},
    { "label": "John", "value": "ef"}
 ]

并如下修改选项标签

<option *ngFor="let i of Type" [value]="i.value">{{i.label}}</option>

希望这对您有帮助...

如何使表单中的元素进行交互

1 个答案: