Question

我对angular来说还很陌生，并且遇到了问题。即，我尝试输入文本类型，然后再次清除它，然后再次设置它而不与UI交互。

因此，在这里，我对text字段有些放心：

<div class="form-group">
    <label for="titleText">Title</label>
    <input type="text" class="form-control" [(ngModel)]="titleText" id="titleText" aria-describedby="titleText" placeholder="Title">
</div>
<div class="form-group">
    <label for="authorText">Author</label>
    <input type="text" class="form-control" [(ngModel)]="authorText" id="authorText" placeholder="Author">
</div>

这是angular部分：

authorText : string;
titleText : string;
durationText : string;
genreText : string;

//Set the values
this.durationText = this.song.duration; //Just a string
this.authorText = this.song.author; 
this.genreText = this.song.genre;
this.titleText = this.song.title;

//Clear the values
jQuery('#editSongDialog').find("input,textarea,select")
    .val('')
    .end()
    .find("input[type=checkbox], input[type=radio]")
    .prop("checked", "")
    .end();

因此，当我尝试设置值并清除值然后再次设置值（使用新值）时，所有字段最终都为空。但是，当我尝试设置值，然后用新值覆盖它们时，它就可以工作。

我的猜测是.prop("checked", "")为字段提供了一个不接受string的值，因此没有填充它。

Answer 1

据我所知，使用jQuery是一种不好的做法，这里最简单的解决方案是使用：

this.titleText = ''

Answer 2

是的，不要使用Jquery ... 一种干净的选择是使用reactive forms或仅使用FormControls。响应式表单或模型驱动的表单将通过操作model或控件本身来简化更新/操作表单控件。无论更改来自何处，服务器或事件……

您可以详细了解here，但这是一个简单的示例。

FormControl示例

<div class="form-group">
    <label for="titleText">Title</label>
    <input type="text" class="form-control" [formControl]="titleText" id="titleText" aria-describedby="titleText" placeholder="Title">
</div>

控制器的相关部分：

titleText: FormControl = new FormControl();
titleText.setValue('My great song'); // sets the value of the input
titleText.reset(); // clears the input

FormGroup示例

<form [formGroup]="form" (submit)="submitForm()">
<div class="form-group">
    <label for="titleText">Title</label>
    <input type="text" class="form-control" formControlName="titleText" id="titleText" aria-describedby="titleText" placeholder="Title">
</div>
<div class="form-group">
    <label for="authorText">Author</label>
    <input type="text" class="form-control" formControlName="authorText" id="authorText" placeholder="Author">
</div>

和控制器

form: FormGroup;
constructor(private fb: FormBuilder, private http: HttpClient) {
    this.form = this.fb.group({
        'titleText': ['initial value'],
        'authorText': [],
    });
}

 ngOnInit() {
    this.form.get('titleText').setValue('Great Song'); //set value of the control
    this.form.get('titleText').clear(); //clear the control
    this.form.setValue({titleText:'Great Song', authorText:'Gaga'}); //update all values in group
    this.form.patchValue({authorText:'Metallica'}); //update single value in group
    this.form.reset() //clear entire form   
}

使用Angular以编程方式设置和清除文本字段

2 个答案: