更改功能包含ng模型

Question

我用ngmodel进行了两种绑定，但是我想编辑字符串以在文本框中查看其格式，这是图像上的示例：

/ ---------------------------- HTML代码------------- ------------------ /

<optimus-dialog #dialog [header]="cleReferentiel.cle_id ? 'Modifier une clé' : 'Ajouter une clé'"
    [dialogRef]="dialogRef">
    <div optimus-dialog-content>
        <optimus-fieldset class="fieldset-1" header="Informations de la clé" [toggleable]="true" [collapsed]="false">
            <div optimus-fieldset-content>
                <div class="optimus-mat-form-field-group">
                    <optimus-mat-form-field type="input" class="optimus-mat-form-field-width-50">
                        <mat-form-field>
                            <input matInput maxlength="50" type="text" placeholder="Clé Java" [formControl]="cle_java" title="Clé Java" >
                        </mat-form-field>
                    </optimus-mat-form-field>

                    <optimus-mat-form-field type="input" class="optimus-mat-form-field-width-50">
                        <mat-form-field>
                            <input matInput maxlength="50" type="text"   placeholder="Clé Camelcase" [formControl]="cle_camelcase" title="Clé Camelcase" [(ngModel)]="code" required #input (input)="input.value=$event.target.value.toUpperCase()">
                        </mat-form-field>
                    </optimus-mat-form-field>

                    <optimus-mat-form-field type="input" class="optimus-mat-form-field-width-50">
                        <mat-form-field>
                            <input matInput maxlength="50" type="text" placeholder="Section" [formControl]="cle_section"
                                title="Section" required>
                        </mat-form-field>
                    </optimus-mat-form-field>

/ ----------------------------- Component.ts ----------- ------------ /

export class ModificationCleComponent extends FormFieldsContainer {


    isReadonly = true;

    toggleReadonly() {
        this.isReadonly = !this.isReadonly;
      }
    envExploitDisabled = ["RI","RU","FOR"];

    // Formulaire
    cleFormGroup: FormGroup;

    // Champs
    cle_java: FormControl;
    cle_camelcase: FormControl;
    cle_type: FormControl;
    cle_section: FormControl;
    cle_desc: FormControl;
    cle_active: FormControl;
    code:String ;
    // Environnements
    valeursControls: { valeur: valeurReferentiel, formControl: FormControl }[] = [];

    // Modèle
    cleReferentiel: CleReferentiel;

    // Constructeur
    constructor(public dialogRef: MatDialogRef<ModificationCleComponent>, private fb: FormBuilder, changeDetectorRef: ChangeDetectorRef,
        private administrationService: AdministrationService, @Inject(MAT_DIALOG_DATA) cleReferentiel: CleReferentiel, public habilitationService: HabilitationService) {
        super(changeDetectorRef);

        this.cleReferentiel = cleReferentiel ? cleReferentiel : { cle_id: null, cle_java: null, cle_camelcase: null,
                              cle_section: null, cle_desc: null, cle_type: null, cle_active: true, cle_flag: false }; //cle active par defaut

        this.buildForm();

        // Binding
        this.setUpdateModel(this.cleReferentiel);
    }

    // Méthode cycle de vie
    ngOnInit() {
    }