下面是我的app.component.html文件,其中包含用户名输入和带有建议按钮的注释输入。建议使用的用户名按钮从我的打字稿文件中生成常量,但是用于注释的第二个按钮不返回任何内容。
以下是我的html文件:
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
<form (ngSubmit)="onSubmit()" #f="ngForm">
<div
id="user-data"
ngModelGroup="userData"
#userData="ngModelGroup">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
class="form-control"
ngModel
name="username"
required>
</div>
<button
class="btn btn-default"
type="button"
(click)="suggestUserName()">Suggest an Username
</button>
<div class="form-group">
<label for="comment">Comment:</label>
<input
type="text"
id="userComment"
class="form-control"
ngModel name="userComment"
required>
</div>
<button
class="btn btn-default"
type="button"
(click)="suggestUserComment()">Suggest a comment!
</button>
<div class="form-group">
<label for="email">Mail</label>
<input
type="email"
id="email"
class="form-control"
ngModel
name="email"
required
email
#email="ngModel">
<span class="help-block" *ngIf="!email.valid && email.touched">Please enter a valid email!</span>
</div>
</div>
<p *ngIf="!userData.valid && userData.touched">User Data is invalid!</p>
<div class="form-group">
<label for="secret">Secret Questions</label>
<select
id="secret"
class="form-control"
[ngModel]="defaultQuestion"
name="secret">
<option value="pet">Your first Pet?</option>
<option value="teacher">Your first teacher?</option>
</select>
</div>
<div class="radio" *ngFor="let gender of genders">
<label>
<input
type="radio"
name="gender"
ngModel
[value]="gender"
required>
{{ gender }}
</label>
</div>
<button
class="btn btn-primary"
type="submit"
[disabled]="!f.valid">Submit</button>
</form>
</div>
</div>
<hr>
<div class="row" *ngIf="submitted">
<div class="col-xs-12">
<h3>Your Data</h3>
<p>Username: {{ user.username }}</p>
<p>Mail: {{ user.email }}</p>
<p>Secret Question: Your first {{ user.secretQuestion }}</p>
<p>comment: {{user.comment}</p>
<p>Gender: {{ user.gender }}</p>
</div>
</div>
</div>
这是我的打字稿文件:
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('f') signupForm: NgForm;
defaultQuestion = 'teacher';
genders = ['male', 'female'];
user = {
username: '',
email: '',
secretQuestion: '',
comment: '',
gender: '',
};
submitted = false;
suggestUserName() {
const suggestedName = 'Superuser';
this.signupForm.form.patchValue({
userData: {
username: suggestedName
}
});
// this.signupForm.setValue({
// userData: {
// username: suggestedName,
// email: ''
// },
// secret: 'pet',
// questionAnswer: '',
// gender: 'male'
// });
}
// onSubmit(form: NgForm) {
// console.log(form);
// }
suggestUserComment(){
const suggestedComment = 'Amin Baghali'
this.signupForm.form.patchValue({
userData: {
comment: suggestedComment
}
});
}
onSubmit() {
this.submitted = true;
this.user.username = this.signupForm.value.userData.username;
this.user.email = this.signupForm.value.userData.email;
this.user.secretQuestion = this.signupForm.value.secret;
this.user.comment = this.signupForm.value.userData.comment;
this.user.gender = this.signupForm.value.gender;
this.signupForm.reset();
}
}