时间戳

首页 > 解决方案 > 使用表单两次返回警告

angular - 使用表单两次返回警告

问题描述

设想：

我有一个简单的表单模板，带有电子邮件和密码。我将此表单模板用于登录和注册目的。但是当我两次使用相同的表单模板时，我会收到类似的警告

[DOM] Found 2 elements with non-unique id #Email

[DOM] Found 2 elements with non-unique id #Password

如何摆脱这个警告。

代码：

userform.component.ts

@Component({
  selector: 'app-userform',
  templateUrl: './userform.component.html',
  styleUrls: ['./userform.component.css']
})
export class UserFormComponent {
  @Output() submitted: EventEmitter<UserModel> = new EventEmitter<UserModel>()
  userForm = new FormGroup({
    email : new FormControl(''),
    password : new FormControl('')
  });

  onSubmit() {
    this.submitted.emit(this.userForm.value);
  }
}

userform.component.html

<div class="card">
  <div class="card-header">
    Login
  </div>
  <div class="card-body">
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="Email">Email address</label>
        <input type="email" class="form-control" id="Email" aria-describedby="emailHelp" placeholder="Enter email" formControlName="email">
      </div>
      <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" class="form-control" id="Password" placeholder="Password" formControlName="password">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

app.component.html

<div class="container">
<div class="row">
    <div class="col-6">
        <app-userform (submitted)="loginUser($event)"></app-userform>
    </div>
    <div class="col-6">
        <app-userform (submitted)="CreateUser($event)"></app-userform>
    </div>
</div>
</div>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loginUser(user: UserModel) {
    console.log('Login User', user);
  }

  CreateUser(user: UserModel) {
    console.log('Create User', user);
  }
}

如果我运行它，一切正常，但会收到警告。我知道当同一个模板渲染两次时，会有两个相同的id。有没有办法自定义id，前缀一个单词？

例如，如果表单用作登录表单，则电子邮件 id 将是 login-email，密码 id 将是 login-password。

标签： angulartypescript

解决方案

正如@JBNizet 在评论中提到的，您可以使用一些变量来设置动态 id。因此，每当组件实例化时，它都会增加

userform.component.ts

let instance=0;
@Component({
  selector: 'app-userform',
  templateUrl: './userform.component.html',
  styleUrls: ['./userform.component.css']
})
export class UserFormComponent {
  @Output() submitted: EventEmitter<UserModel> = new EventEmitter<UserModel>()
  userForm = new FormGroup({
    email : new FormControl(''),
    password : new FormControl('')
  });
 constructor(){

 this.id=instance++;

 }
  onSubmit() {
    this.submitted.emit(this.userForm.value);
  }
}

userform.component.html

<div class="card">
  <div class="card-header">
    Login
  </div>
  <div class="card-body">
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="Email">Email address</label>
        <input type="email" class="form-control" id="Email{{id}}" aria-describedby="emailHelp" placeholder="Enter email" formControlName="email">
      </div>
      <div class="form-group">
        <label for="Password">Password</label>
        <input type="password" class="form-control" id="Password{{id}}" placeholder="Password" formControlName="password">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</div>

示例：https ://stackblitz.com/edit/form-instance

推荐阅读