在您按下“编辑”按钮之前，所有输入和下拉菜单都应被阻止（无法写入或 select 选项）。为什么它不起作用？

Question

我的 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)
  }
}

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

Why is it not working?

怎么做，只有一个编辑按钮，按下后会变成我的注册按钮？

Answer 1

当声明你的表单时，像这样设置 disabled 属性：

 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" 默认是提交

在您按下“编辑”按钮之前，所有输入和下拉菜单都应被阻止（无法写入或 select 选项）。为什么它不起作用？

All inputs and dropdown should be blocked (no possibility to write or select options) until you press the Edit button. Why is it not working?

edit

angular-ngselect

angular