使用表单两次会返回警告

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 将是登录电子邮件，密码 ID 将是登录密码。

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