Question

场景：

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

的警告

[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。

Answer 1

正如@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

两次使用表单会返回警告

1 个答案: