应阻止所有输入和下拉菜单无法编写或选择选项，直到您按下“编辑”按钮为什么它不起作用？

如何解决应阻止所有输入和下拉菜单无法编写或选择选项，直到您按下“编辑”按钮为什么它不起作用？

我的 html 文件：

<div class="main-wrapper" fxLayout="row" fxLayoutAlign="center center">
<mat-card class="Box">
    <mat-card-header>
        <mat-card-title>Register</mat-card-title>
    </mat-card-header>

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

        <!-- Username -->
        <mat-card-content>
            <mat-form-field class="example-full-width">
                <input matInput placeholder="Username" ngModel name="username" minlength="5"
                    formControlName="username" required [readOnly]="!enableEdit">
            </mat-form-field>
            <mat-error *ngIf="username.touched && !username.valid">
                <div *ngIf="username.errors.required">Username is required.</div>
                <div *ngIf="username.errors.minlength">Username should be minimum 5 characters.</div>
            </mat-error>

            <!-- Email -->
            <mat-form-field class="example-full-width">
                <input matInput placeholder="Email" ngModel name="email" minlength="5" [pattern]="emailPattern"
                    formControlName="email" required [readOnly]="!enableEdit">
            </mat-form-field>
            <mat-error *ngIf="email.touched && !email.valid">
                <div *ngIf="email.errors.required">Email is required.</div>
                <div *ngIf="email.errors.pattern">Email is not valid.</div>
            </mat-error>

            <!-- Password -->
            <mat-form-field class="example-full-width">
                <input matInput placeholder="Password" ngModel name="password" minlength="5"
                    formControlName="password" required [readOnly]="!enableEdit">
            </mat-form-field>
            <mat-error *ngIf="password.touched && !password.valid">
                <div *ngIf="password.errors.required">Password is required.</div>
                <div *ngIf="password.errors.minlength">Password should be minimum 5 characters.</div>
            </mat-error>

            <!-- Repeat Password -->
            <mat-form-field class="example-full-width">
                <input matInput placeholder="Confirm Password" ngModel name="confirmpassword" formControlName="confirmpassword"
                    required [readOnly]="!enableEdit">
            </mat-form-field>
            <mat-error *ngIf="confirmpassword.touched && confirmpassword.value != password.value"> Passwords does not match
            </mat-error>

            <ng-select [items]="items" bindLabel="name" ngModel name="dropdown" formControlName="dropdown" required [disabled]="!enableEdit"></ng-select>
            <div *ngIf="!dropdown" class="invalid-Feedback">Dropdown is required</div>

        </mat-card-content>

        <button mat-button color="primary" class="btn-block" (click)="enableEdit = !enableEdit">Edit</button>
        <button mat-button color="primary" class="btn-block" type="submit" [disabled]="!registerForm.valid">Register</button>
    
    </form>
</mat-card>

我的 ts 文件：

import { FormBuilder,FormGroup,Validators } from '@angular/forms';

@Component({
  selector: 'app-register-form',templateUrl: './register-form.component.html',styleUrls: ['./register-form.component.css']
})
export class RegisterFormComponent implements OnInit {

  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";  //Pattern to check if email is correct
  
  registerForm;

  enabledEdit = false;


  constructor(private formBuilder: FormBuilder) {}

  
  ngOnInit() {
    this.registerForm = this.formBuilder.group({
      username: [''],email: [''],password: [''],confirmpassword: [''],dropdown:['']
    });
  } 

  items = [
    {
      id: 1,name: 'Option 1'
    },{
      id: 2,name: 'Option 2'
    },{
      id: 3,name: 'Option 3'
    },{
      id: 4,name: 'Option 4'
    },]

 

  get username() {
    return this.registerForm.get('username');
  }
  get email() {
    return this.registerForm.get('email');
  }
  get password() {
    return this.registerForm.get('password');
  }
  get confirmpassword() {
    return this.registerForm.get('confirmpassword');
  }
  get dropdown() {
    return this.registerForm.get('dropdown');
  }


  onSubmit() {
    console.log(this.registerForm.value)
  }
}

在您按下“编辑”按钮之前，应阻止所有输入和下拉菜单（无法编写或选择选项）。

为什么它不起作用？

怎么办，只有一个编辑按钮在按下时变成我的注册按钮？

提前感谢所有回答。

规避文字要求的无效内容：

看起来你的帖子主要是代码；请添加更多详细信息。

解决方法

在声明表单时设置禁用属性，如下所示：

 this.disableForm = true;
 this.registerForm = this.formBuilder.group({
   username:[{value:'',disabled:this.disableForm}],...
})

然后在用户单击时将您的单击事件绑定到函数而不是直接更改。

enableEdit(){
    //change monitoring status for the form
    this.disableForm = !this.disableForm;
    // if form is enabled then disable it. else enable the form
    if(!this.disableForm) this.registerForm.disable();
    else this.registerForm.enable();
}

如果有帮助的话，请对代码进行一些说明：

• 您在单个表单上使用反应式表单和模板驱动表单的组合。这是不好的做法，可能会导致形成不可预测的行为。
• 尝试在 constructor 而不是 OnInit 上初始化表单。
• 给编辑按钮一个 type="button" 默认是提交