Angular2 - Klicken Sie Formularfelder

Question

Ich habe ein Formular zu bearbeiten, die Daten aus einem Dienst zieht und zeigt es als

folgt

@Component({ 
    selector: 'profile', 
    template: `<h1>Profile Page</h1> 
    <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngForm"> 
    <div *ngFor="#prof of profileObject"> 
     <label from="name">Name</label> 
     <input [ngFormControl]="myForm.controls['name'] "type="text" id="name" #name="ngForm" [(ngModel)]="prof.userFirstName"> 
    </div> 
    <button name="submit" type="submit">submit</button> 
    </form> 

    <a [routerLink]="['../Dashboard']">Back to Dash</a> 
    `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

export class ProfileComponent implements OnInit { 
    myForm: ControlGroup; 
    userEmail = JSON.parse(localStorage.getItem('profile')); 
    public profileObject: Object[]; 


    constructor(private fb: FormBuilder, private apartmentService: ApartmentService) { 
     this.apartmentService = apartmentService; 
    } 


    onSubmit(form) { 
     console.log(this.myForm); 
     //post to rest API 
    }; 

    ngOnInit(): any { 
     this.apartmentService.getProfile(this.userEmail.email).subscribe(res => this.profileObject = res); 
     this.myForm = this.fb.group({ 
      'name': ['', Validators.required], 
     }); 
    } 
} 

Wenn die Komponente der Vorlage lädt die Daten anzeigt, in Eingabetext vorgefüllt.

Wie kann ich Daten in Beschriftungen anzeigen und sie in Eingabetext bei Benutzerklick ändern? im Grunde wollen, klicken Sie einfach implementieren Funktionalität in Form bearbeiten

Answer 1

Sie *ngIf können zwischen zwei Ansichten wechseln:

<label *ngIf="!isEdit" (click)="isEdit=true" from="name">Name</label> 
    <input *ngIf="isEdit" (keydown.enter)="isEdit=false" 
     [ngFormControl]="myForm.controls['name'] "type="text" 
     id="name" #name="ngForm" [(ngModel)]="prof.userFirstName">