zitadel/console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.html

<h1 mat-dialog-title>
    <span class="title">{{'PROJECT.ROLE.EDITTITLE' | translate}}</span>
</h1>
<p class="desc"> {{'PROJECT.ROLE.EDITDESCRIPTION' | translate}}</p>
<div mat-dialog-content>
    <form *ngIf="formGroup" class="full-width" [formGroup]="formGroup" (ngSubmit)="submitForm()">
        <cnsl-form-field class="formfield" appearance="outline">
            <cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
            <input cnslInput formControlName="key" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield" appearance="outline">
            <cnsl-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</cnsl-label>
            <input cnslInput formControlName="displayName" />
        </cnsl-form-field>
        <cnsl-form-field class="formfield" appearance="outline">
            <cnsl-label>{{ 'PROJECT.ROLE.GROUP' | translate }}</cnsl-label>
            <input cnslInput formControlName="group" />
        </cnsl-form-field>
    </form>
</div>

<div mat-dialog-actions class="action">
    <button mat-button (click)="closeDialog()">
        {{'ACTIONS.CANCEL' | translate}}
    </button>

    <button [disabled]="formGroup.invalid" color="primary" mat-raised-button class="ok-button" (click)="submitForm()">
        {{'ACTIONS.SAVE' | translate}}
    </button>
</div>