Сибирские интеграционные системы
AngularSIS #1.18 - https://www.youtube.com/playlist?list=PLmEQRj1_Mt5fkeBYOw1o8k_o8-7POFZJN JavaSIS #2.19 - https://www.youtube.com/playlist?list=PLmEQRj1_Mt5f5MlXGlf5kzldb9Rl8Pwuo
Петров Андрей
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<button type="submit">Submit</button>
</form>
<input [(ngModel)]="inputValue">
<div>
<button (click)="plus()">+</button>
<button (click)="divide()">/</button>
<button (click)="multiply()">*</button>
<button (click)="calculate()">=</button>
</div>
<label title="Название задачи">Задача:
<input [(ngModel)]="taskName">
</label>
<button (click)="createTask()">Создать</button>
<form>
<label>Фамилия <input [(ngModel)]="lastName"></label>
<label>Имя <input [(ngModel)]="name"></label>
</form>
@Component({
selector: 'sis-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent {
name: string;
lastName: string;
constructor() { }
}
<form (submit)='saveInfo()'>
<label>Фамилия <input [(ngModel)]="lastName"></label>
<label>Имя <input [(ngModel)]="name"></label>
<button type="submit">Сохранить</button>
</form>
@Component({
selector: 'sis-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent {
name: string;
lastName: string;
constructor() { }
saveInfo() {
// Process info here
}
}
<form (submit)='lastNameModel.valid && nameModel.valid && saveInfo()'>
<label>
Фамилия
<input [(ngModel)]="lastName"
#lastNameModel="ngModel"
required>
</label>
<label>
Имя
<input [(ngModel)]="name"
#nameModel="ngModel"
required
minlength="4">
</label>
<button type="submit">Сохранить</button>
</form>
Для реактивных форм нужно импортировать модуль ReactiveFormsModule
<form (submit)="processForm()">
<label>Фамилия <input [formControl]="lastName"></label>
<label>Имя <input [formControl]="name"></label>
</form>
@Component({
selector: 'sis-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent {
name: FormControl;
lastName: FormControl;
constructor() {
this.name = new FormControl('');
this.lastName = = new FormControl('');
}
processForm() {
// Process form data
}
}
@Component({
selector: 'sis-contacts',
templateUrl: './contacts.component.html',
styleUrls: ['./contacts.component.css'],
})
export class ContactsComponent {
name: FormControl;
lastName: FormControl;
constructor() {
this.name = new FormControl('', [Validators.required]);
this.lastName = new FormControl('', [Validators.required, Validators.minLength(4)]);
}
processForm() {
if (this.name.valid && this.lastName.valid) {
// Process form data
}
}
}
export class ContactsComponent {
contactsForm: FormGroup;
constructor() {
this.contactsForm = new FormGroup({
name: new FormControl(''),
lastName: new FormControl(''),
});
}
processForm() {
if (this.contactsForm.valid) {
// Process form data
}
}
}
<form [formGroup]="contactsForm" (submit)="processForm()">
<label>Фамилия <input formControlName="lastName"></label>
<label>Имя <input formControlName="name"></label>
</form>
By Сибирские интеграционные системы
Формы