After reviewing your issue, it became clear to me. While there are several suggested improvements from others, I managed to resolve the issue by making modifications to your stackblitz project. Here is the link:
Edited stackblitz
In addition, I am providing the updated code below:
HTML:
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group" [ngClass]="{'editing': editing.given_name}">
<label for="number">First Name</label>
<input type="text" class="form-control" formControlName="given_name" id="given_name" placeholder="Jane">
<div class="value">{{user.given_name}}</div>
<button (click)="toggleEdit('given_name')">Edit</button>
</div>
<div class="form-group" [ngClass]="{'editing': editing.family_name}">
<label for="street">Last Name</label>
<input type="text" class="form-control" formControlName="family_name" id="family_name" placeholder="Doe">
<div class="value">{{user.family_name}}</div>
<button (click)="toggleEdit('family_name')">Edit</button>
</div>
<div class="form-group" [ngClass]="{'editing': editing.nickname}">
<label for="city">Public Name</label>
<input type="text" class="form-control" formControlName="nickname" id="nickname">
<div class="value">{{user.nickname}}</div>
<button (click)="toggleEdit('nickname')">Edit</button>
</div>
<div class="form-group" [ngClass]="{'editing': editing.gender}">
<label for="zip">Gender</label>
<input type="text" class="form-control" formControlName="gender" id="gender">
<div class="value">{{user.gender}}</div>
<button (click)="toggleEdit('gender')">Edit</button>
</div>
<div class="form-button-goup">
<button type="submit" class="btn sml submit" [disabled]="form.invalid">Save</button>
</div>
TS:
import { Component, Input, OnDestroy, OnInit } from "@angular/core";
import {
FormBuilder,
FormControl,
FormGroup,
Validators
} from "@angular/forms";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
editing = {
given_name: false,
family_name: false,
nickname: false,
gender: false
};
user = {
given_name: "Ted",
family_name: "Mosley",
nickname: "Tedster",
gender: "Male"
};
form = new FormGroup({
given_name: new FormControl(this.user.given_name, Validators.required),
family_name: new FormControl(this.user.family_name, Validators.required),
nickname: new FormControl(this.user.nickname),
gender: new FormControl(this.user.gender, Validators.required)
});
toggleEdit(attribute) {
console.log(attribute);
this.editing[attribute] = !this.editing[attribute];
}
}
The issue stemmed from using a boolean 'editing' variable for all fields, which disabled everything once one field was edited. I made it more specific in order to address this.