Question

想知道是否有更好的方法更新邻居输入字段。我有一个想法，但我认为这不是最好的解决方案，因此想看看是否有其他方法可以做到这一点。

app.html

<form (ngSubmit)="submit()">
 <div class="form-group">
  <input placement="First name" [(ngModel)]="firstname" (input)="onNameChange()" />
 </div>
 <div class="form-group">
  <input placement="Surname" [(ngModel)]="surname" (input)="onNameChange()" />
 </div>
 <div class="form-group">
  <input placement="Nickname" [(ngModel)]="nickname" /> 
 </div>
</form>

app.ts

onNameChange: void {
 let firstname=this.firstname.trim();
 let surname=this.surname.trim();
 let remaining=this.nickname.replace(firstname, '').trim();
 remaining=remain.replace(surname, '').trim();
 if (!remaining) {
  let nickName = firstname.concat(' ', surname);
  this.nickname = nickName.trim();
 }
}

理想地，当昵称字段为空或仅包含名字和姓氏中的值时，以上代码应自动填写昵称。有更好的办法吗？

可能的输出：

firstname: Jim
surname: 
nickName: Jim

firstname: Jim
surname: Smith
nickName: Jim Smith

firstname:
surname: Smith
nickName: Smith

// try to enter different value in the firstname and surname fields
// but those fields don't change the nickname field because nickname is 
// not the same as the firstname or surname
firstname: Jim 
surname: Smith
nickName: Tom Smiths 

firstname:
surname: 
nickName: Jim Smith

Answer 1

由于您的逻辑非常简单，因此可以使用this stackblitz中的模板引用变量。

<input #first placement="First name" placeholder="First name" (input)="deactivate ? null : nick.value = first.value.trim() + ' ' + last.value.trim()" />
<input #last placement="Surname" placeholder="Last name" (input)="deactivate ? null : nick.value = first.value.trim() + ' ' + last.value.trim()" />
<input #nick placement="Nickname" placeholder="Nickname" (input)="deactivate = true" />

（我简化了ngModel，但是您可以保留它们，具体取决于您对表单的处理方式）。

仅在未定义时更新相邻输入字段

1 个答案: